js获取非行间样式(兼容ie和标准浏览器)

最新推荐文章于 2023-02-19 20:51:04 发布

原创最新推荐文章于 2023-02-19 20:51:04 发布 · 706 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#行间样式 #非行间样式

前端基础点专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript获取非行间样式的方法，分别针对IE9及以下和Firefox等标准浏览器提供了不同的实现方式，并提到了getComputedStyle方法的参数含义。总结了在不同浏览器环境下获取非行间样式的通用写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <div class="box" id="box" style="background-color: #f0f;color: #fff;"></div>
</body>

<style type="text/css">
    body{
        /* 加载背景图 */
        background-image: url();
        /* 背景图垂直、水平均居中 */
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #fff;
    }
    .box{width: 100%;min-height: 400px;margin: 0;padding: 0;background-color: #fff;}
</style>

1.一般情况下用js获取行间标签的属性值：

var myBody=document.getElementsByTagName('body')[0],
myBox=document.getElementById('box');
console.info(myBody.style.width);//没有值，因为body标签无法获取这个属性值。
console.info(myBox.style.width);//获取到该标签的行间样式值。

2.如果要获取非行间属性值：

对于IE9的浏览器：

console.info(myBox.currentStyle(attr));

对于ff等标准浏览器：

console.info(getComputedStyle(myBox,false)[attr])

ps：getComputedStyle(odiv,false)这里的两个参数，第一个参数代表要获取那个元素的样式，第二个是解决FF较低版本的写法，而对于高版本的可以不用写。

总结：获取非行间样式的写法：

function getStyle(obj,attr,value){
    if(obj.currentStyle){//针对ie获取非行间样式
	return obj.currentStyle(attr);
    }else{//标准浏览器ff
	return getComputedStyle(obj,false)[attr];
    }		
}

本文参考资料：https://blog.csdn.net/yh674256/article/details/47039511