2

当我获得自定义 CSS 属性的值时，该getPropertyValue方法返回一个 DOMString，其中包括我在CSS 格式化中使用的空格。是否应该使用其他方法来获取自定义 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; }

请注意，当您运行代码片段时，该getPropertyValue函数返回一个具有前导空格的值（这是我的 CSS 格式的工件）。

4

3 回答 3

1

这是一个深思熟虑的决定，允许自定义 CSS 属性将空白视为重要。所以修剪是要走的路。

我听说用定义的语法注册属性可能会改变这一点，但我认为它还不是标准的，我自己也没有尝试过。

于 2022-02-20T17:37:37.300 回答
1

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

body { 
--color1:#333333; 
}
于 2020-12-06T20:47:10.657 回答
0

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

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);
}

于 2020-07-06T14:00:34.210 回答