代码之家 › 专栏 › 技术社区 › ScottS

正在添加!在动态编写的Internet Explorer样式表中非常重要

stylesheet css javascript

3

ScottS · 技术社区 · 15 年前

我一直在尝试使用javascript动态编写样式表。在Firefox中,可以使用 setProperty cssRules 的 styleSheets

document.styleSheets[0].cssRules[0].style
  .setProperty(propertyName, propertyValue, 'important');

…设置 !important setAttribute 方法没有用于设置样式上的标志)。一些实验发现,对于精确的样式,例如 border-top-width, 我可以重写 cssText border-top , border-right !重要的 没有接受重写接受旗帜。

样式表 规则,让IE始终如一地设定 !重要的 那个规则的旗子?

2 回复 | 直到 15 年前

1

2

ScottS 15 年前

我花了更多的时间做一些测试,并得出结论,我的重写 cssText 正在添加 !important CSST文本 不要反映这一点。

CSST文本 属性(如果在重写后检查它以添加 !重要的 )微软开发人员工具栏对元素的检查也没有显示属性具有 !重要的 正在设置。但是,该元素的显示就像我的重写工作一样。我通过放置一个 !重要的 在图像边框的基本样式上,如下所示:

img {border: 3px solid green !important;}

然后,我用javascript创建了styleSheets对象,并添加了一个更具体的规则(使用 id (图像的)这有它自己的特点 CSST文本 重写为在已经设置了 style 的 styleSheets borderTopColor = red . 然后设置元素的内联样式,将顶部颜色更改为黄色。结果和我预期的一样 !重要的 旗帜。红色胜出,因为它是比原始绿色更晚(更具体)的调用,并且内联样式不会覆盖它。如果我删除 !重要的 然后颜色变为绿色,如果我去掉绿色的 !重要的 颜色变为黄色。

我还用绿色测试了这一点,绿色的选择器特异性比红色的javascript编写风格要高。这也和预期一样,格林获胜,因为它现在对竞争对手具有更高的选择特异性 !重要的 红色宣言。

CSST文本 的 样式表 并不像直接用javascript调用属性来设置它那么简单,至少它可以工作。真正的“错误”是 CSST文本 开发人员工具栏也没有给我正确的信息 !重要的 标志设置在这些样式上,所以如果有人在后面检查站点,他们可能会弄不明白为什么这些样式会发生某些事情(为什么一些看起来不重要的事情会表现得好像是这样)。

2

0

Nick 15 年前

我认为你最好的办法就是写你的css,这样你就不用用了!替代级联中的样式很重要。很糟糕,但这就是IE崩溃的原因。