Question

我想获得一种dom风格以提高优先级。

'CSSStyleDeclaration'具有'getPropertyPriority'方法，并且其返回值存在问题。在下面的示例中，当我获得“背景”时，它返回空，我想获得“重要”

通过'styleSheets'获得的值是正常的，但是我不想使用循环来找到相应的选择器，我希望给我一个简单的解决方案。

这是文档link

// log is '', I want to get 'important'
console.log(window.getComputedStyle(document.getElementById('box')).getPropertyPriority('background'));
// log is 'important'
console.log(document.styleSheets[0].cssRules[0].style.getPropertyPriority('background'));
// log is 'important'
console.log(document.getElementById('box').style.getPropertyPriority('width'));

#box {
  height: 100px;
  background: black !important;
}

<div id="box" style="width: 100px !important;"></div>

Answer 1

从document.getElementById('box').style或document.styleSheets[0].cssRules[0].style访问样式将按原样直接提供样式，而顾名思义，在进行getComputedStyle时，将始终提供渲染样式，即!important被删除，因此getPropertyPriority将始终给出''。我认为没有选择，只能循环检查所有样式。

您可以像已经完成的一样检入样式表和样式属性：

var arr = ['background', 'width', 'height'];

arr.forEach(prop => {
  //console.log(window.getComputedStyle(document.getElementById('box')).getPropertyPriority(prop));
  var isImportant = (document.styleSheets[0].cssRules[0].style.getPropertyPriority(prop) + document.getElementById('box').style.getPropertyPriority(prop)).length > 0;
  console.log({prop, isImportant});
});

#box {
  height: 100px;
  background: black !important;
}

<div id="box" style="width: 100px !important;"></div>

Answer 2

由getComputedStyleStyle返回的CSSStyleDeclaration对象与从StyleSheet或Element的alert("hi")属性中获得的对象有所不同。

首先，该对象是只读的，您不能在其上使用style。

setProperty

const comp = getComputedStyle(test);
comp.setProperty('backgroundColor', 'green');

然后，在获取其属性时，将返回该属性的计算值，该值与已编写的值不同：

<div id="test" style="height:25px;background-color:red"></div>

const comp = getComputedStyle(test);
console.log('computed', comp.getPropertyValue('width'));

const auth = test.style;
console.log('from style', auth.getPropertyValue('width'));

并且由于此CSSStyleDeclaration词典仅包含 computing 属性，因此不需要任何重要性，因为这些属性将始终是单独的，因此<div id="test" style="width:calc(3% + 25px)"></div>将始终返回空字符串。

要检索设置此属性的原始规则通常是不可能的，它很可能来自您无法读取的跨域StyleSheet。甚至incoming CSSTypedOM确实为我们提供了检索创作单位和值的手段，也没有暴露出财产的重要性。

使用“ getComputedStyle”获取样式时，“ getPropertyPriority”不起作用

2 个答案: