javascript 获取最终样式

最新推荐文章于 2024-08-03 17:05:14 发布

weixin_30372371

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量124

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/zouhaijian/archive/2009/09/23/1572891.html

版权

如下：
#div1{
　　width:100px;
}
<div id="div1"></div>
如果想通过document.getElementById("div1").style.width来获取是不成功的。必须写inline css
但是line css往往不符合要求，并没有将结构与表现分离

所以要用js来或取最终样式,如获取width
dom:
　　document.defaultView.getComputedStyle(obj, null).width;
ie:
　　obj.currentStyle.width;

整个例子：

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Computed Style Example</title>
<style type="text/css">
div.special{
    margin-top:10px;
    width:200px;
    height:10px;
    background:aqua;
}
</style>
</head>

<body>
    <div>
        <div id="div1" class="special"></div>
        <input type="button" value="Get Background Color" onclick="javascript:alert(getFinallyStyle('div1', 'width'))" />
    </div>

<script type="text/javascript">
//<![CDATA[
function getFinallyStyle(sElementId, sAttribute) {
    var oElement = document.getElementById(sElementId);

    return !!document.defaultView ? eval("document.defaultView.getComputedStyle(oElement, null)." + sAttribute) :
                                    eval("oElement.currentStyle." + sAttribute);
}
//]]>
</script>
</body>

</html>

转载于:https://www.cnblogs.com/zouhaijian/archive/2009/09/23/1572891.html

weixin_30372371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 获取最终样式

如下：#div1{　　width:100px;}<div id="div1"></div>如果想通过document.getElementById("div1").style.width来获取是不成功的。必须写inline css但是line css往往不符合要求，并没有将结构与表现分离所以要用js来或取最终样式,如获取widthdom:　　document.default...
复制链接

扫一扫