使用JavaScript从外部CSS文件得到一个元素的样式

我有这样的HTML：使用JavaScript从外部CSS文件得到一个元素的样式

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" media="all" href="style.css"> 
    </head> 

    <body> 
     <div id="test">Testing</div> 

     <script> 
      alert(document.getElementById('test').style.display); 
     </script> 
    </body> 
</html>

的style.css中：

div { 
    display:none; 
}

我期望JS将返回“无“，但它会返回一个空字符串。有什么办法可以解决这个问题吗？

来源

2010-04-01 Alan

这将适用于符合标准的浏览器（不是IE - currentStyle/runtimeStyle）。

<body> 
    <div id="test">Testing</div> 

    <script type="text/javascript"> 
     window.onload = function() { 
      alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('display')); 
     } 
    </script> 
</body>

来源

2010-04-01 04:13:11 Jonathan

加载一个150KB库来做一些在vanilla JS中是单线程的东西？你是认真的吗？ – 2010-04-01 04:15:28

谢谢。但是，我们的网页将用于移动设备，因此我们需要尽量减少网页的大小。因此不建议使用jquery。有没有其他方法可以达到相同的效果？ – Alan 2010-04-01 04:16:47

可能值得一提的是，在这个问题上。特殊的手机？有不少人根本不支持JS。 – Jonathan 2010-04-01 04:22:14

由于display没有直接作为样式属性设置，所以不会使用上述代码。你必须得到计算值。

您可以参考这个网页，Get styles

，以获得CSS不会没有加载值

var displayValue = getStyle("test", "display"); 

function getStyle(el,styleProp) 
{ 
    var x = document.getElementById(el); 
    if (x.currentStyle) 
     var y = x.currentStyle[styleProp]; 
    else if (window.getComputedStyle) 
     var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    return y; 
}

来源

2010-04-01 04:09:50 rahul

感谢。但我怎么能得到计算值？ – Alan 2010-04-01 04:14:10

编辑我的答案。 – rahul 2010-04-01 04:46:14

该函数非常基本，它会由两个或更多个单词（即'font-size'，'background-color'等）形成的CSS属性名称出现问题，并且'getComputedStyle'方法应该从' document.defaultView'对象，因为并非所有的浏览器在Global对象（'window'）上都有'defaultView'成员可用，并且存在更多不一致性，请查看我所做的这个实现：http://stackoverflow.com/questions/2531737/javascript-incapable-of-getting-elements-max-height-via-element-style-maxheight/2531934＃2531934 – CMS 2010-04-01 05:36:30

。将您的JavaScript封装在“准备就绪”事件中。

<body onload="alert(document.getElementById('test').style.display);">

为你做这项工作？

来源

2010-04-01 04:10:57

谢谢。有没有例子？ – Alan 2010-04-01 04:17:33

不起作用= [ – Alan 2010-04-01 04:27:31

使用JavaScript从外部CSS文件得到一个元素的样式

回答

相关问题