如何在通过外部CSS文件应用javascript时访问css属性？

我有一个小问题。当我使用某些属性设置css规则时，比如在外部.css文件中使用background-image，然后尝试在另一个外部.js文件中使用javascript访问它时，它不起作用。也就是说，我没有得到任何价值document.getElementById(someId).style.backgroundImage.如何在通过外部CSS文件应用javascript时访问css属性？

但是，当我设置的HTML文件本身使用样式属性的CSS规则，它的工作原理。

因此，如果在外部.css文件中设置了css，我的查询就无法访问js中的css属性。

来源

2010-10-30 Rahul Utb

在文档中指定的规则与外部指定的规则之间没有区别。你确定外部CSS文件被正确包含，并且你是否在等待它通过'onload'加载？ – meagar 2010-10-30 04:44:32

在DOM呈现（通过HTML或包含.js文件直接加载），_onload_事件或稍后按按钮单击之后，您的JavaScript是否正在运行？ – NVRAM 2010-10-30 04:51:32

是的，外部的CSS文件加载正确，并且它通常不是通过onload加载。是的，javascript在加载DOM之前运行。 js被调用onmouseover，onmouseout和onClick等事件。 – 2010-10-30 07:03:17

你可以使用jQuery来编辑。请参考http://api.jquery.com/css/

来源

2010-10-30 04:41:55

您是否试图在实际渲染/ DOM准备好之前检索属性？尝试在主体的onload事件中执行此操作，或者如果您使用jQuery，$(document).ready()。

来源

2010-10-30 04:43:42 mway

它与onload无关。在写这个之前你有没有测试过什么？ – galambalazs 2010-10-30 09:10:13

如果你想在一个样式表来访问的CSS属性集，而不是一个内嵌样式属性，使用document.defaultView.getComputedStyle（除了IE低于9）或element.currentStyle老年IE的。

如：

function deepCss (who, css){ 
    var dv, sty, val; 
    if(who && who.style){ 
     css= css.toLowerCase(); 
     sty= css.replace(/\-([a-z])/g, function(a, b){ 
      return b.toUpperCase(); 
     }); 
     val= who.style[sty]; 
     if(!val){ 
      dv= document.defaultView || window; 
      if(dv.getComputedStyle){ 
       val= dv.getComputedStyle(who,'').getPropertyValue(css); 
      } 
      else if(who.currentStyle){ 
       val= who.currentStyle[sty]; 
      } 
     } 
    } 
    return val || ''; 
}

deepCss（document.body的 '字体大小'）

来源

2010-10-30 05:03:05 kennebec

对不起，但我无法理解此功能及其用法。 – 2010-10-30 07:07:33

只能在JavaScript中访问样式属性已经通过JavaScript（或style ATTR设置）。

要访问元素当前样式，您应该获取元素的computed style。

var el = document.getElementById('hello'); 
var comp = el.currentStyle || getComputedStyle(el, null); 
alert(comp.backgroundColor);

注意的是，计算样式可以在浏览器中改变（如颜色以十六进制正在或RGB），所以你应该正常化，如果你想统一的结果。

来源

2010-10-30 09:07:40 galambalazs

+1，很好的回答！ – 2010-10-30 09:21:05

我一直想知道为什么我无法使用Javascript访问当前样式。我也从来不知道这种方法。万分感谢！ – Rook777 2013-02-12 19:08:48

这应该是被接受的答案。这个问题也在这里回答了https://stackoverflow.com/questions/1193409/how-can-i-access-style-properties-on-javascript-objects-which-are-using-external?noredirect=1&lq=1 – Eggs 2018-02-15 17:42:57

样式属性可用于设置样式并检索内联样式值，但无法检索在外部样式表中设置的样式值。

someElement = document.getElementById("element"); 
myStyles = document.defaultView.getComputedStyle(someElement,null); 
backgroundImage = myStyles.getPropertyValue("background-image"); // w3c 
backgroundImage = someElement.currentStyle["background-image"]; //IE

来源

2011-06-30 22:38:46 Marin

如何在通过外部CSS文件应用javascript时访问css属性？

回答

相关问题