getPropertyValue() 在检索自定义 CSS 属性值时包含 CSS 格式的空白答案

【问题标题】：getPropertyValue() includes whitespace of CSS formating when retrieving Custom CSS Property ValuesgetPropertyValue() 在检索自定义 CSS 属性值时包含 CSS 格式的空白
【发布时间】：2020-10-26 05:42:59
【问题描述】：

当我获得自定义 CSS 属性的值时，getPropertyValue 方法返回一个 DOMString，其中包含我在 CSS formatting 中使用的空格。我应该使用其他方法来获取自定义 CSS 属性的值（之后不需要修剪的方法）吗？

function getCustomPropertyValue(element,customPropertyName)
{
    let style = window.getComputedStyle(element);
    return style.getPropertyValue(customPropertyName);
}
let value = getCustomPropertyValue(document.body,"--color1");
console.log(`'${value}'`);

body { --color1: #333333; }

请注意，当您运行代码 sn-p 时，getPropertyValue 函数会返回一个具有前导空格的值（这是我的 CSS 格式化的产物）。

【问题讨论】：

如果你像 body { --color1:#333333; } 这样写你的 CSS，那么它就消失了。有点好笑。我会修剪你的返回值
我也注意到了这一点，并且如果getPropertyValue 确实是获取自定义 CSS 属性值的正确方法，我打算进行修剪。
这是一个深思熟虑的决定，允许自定义 CSS 属性将空格考虑在内。所以修剪是要走的路。我听说使用定义的语法注册属性可能会改变这一点，但我认为它还不是标准的，我自己也没有尝试过。

标签： javascript css dom custom-properties

【解决方案1】：

当您以正确的方式使用 CSS 变量时，它会起作用。您可以找到更多详细信息here。

function getCustomPropertyValue(element, customPropertyName) {
  let style = window.getComputedStyle(element);
  return style.getPropertyValue(customPropertyName);
}
let value = getCustomPropertyValue(document.body, "--color1");
console.log(`'${value}'`);

:root {
  --color1:#333333;
}

body {
  color: var(--color1);
}

【讨论】：

当我运行你的代码 sn-p 时，我看到了我输出的 vary same leading space。从后代元素而不是创建自定义值的元素中获取值并不是我所说的“正确方法”。我可以根据您要求的元素考虑值可能不同的情况，并且正确的方法完全是间接的。
@LonnieBest 并且前导空格消失了。几乎就像纸牌把戏。
你作弊了！您将 --color1: #333333; 更改为 --color1:#333333;（从 CSS 本身中删除该空间）。你不能欺骗card trick programmer，伙计！不过这一切都很好。享受吧。无论如何，我都对你投了赞成票。

【解决方案2】：

只需删除 CSS 中的空白即可。

body { 
--color1:#333333; 
}

【讨论】：