IE和谷歌(火狐)浏览器兼容获取内部样式表和外部样式表的样式

最新推荐文章于 2021-09-02 17:11:19 发布

廉颇易老

最新推荐文章于 2021-09-02 17:11:19 发布

阅读量986

点赞数

分类专栏：前端文章标签：谷歌 ie 浏览器 javascript html5

本文链接：https://blog.csdn.net/liuyuemozhu/article/details/59225490

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

内部样式表和外部样式表的样式不能使用节点.style.属性名的方式来获取样式。

所以今天学习了IE谷歌之间兼容获取内部样式表和外部样式表的样式的方法。

以内部样式表为例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取内部样式表或外部样式表的样式</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
#container{
width: 400px;
height: 100px;
margin: 0 auto;
border: 1px solid gold;
line-height: 100px;
color:blue;
}
p{
color: red;
font-size: 2em;
text-align: center;
}

</style>
</head>
<body>
<div id="container">
<p>获取内部样式表的样式</p>
</div>

<script type="text/javascript">

function $getSty(ele,attr){
if(ele.currentStyle){
return ele.currentStyle[attr];
} else {
return window.getComputedStyle(ele,null)[attr];
}
}

// 获取div元素。
var obj = document.getElementById('container');
var sty = $getSty(obj,"color");
alert(sty);

</script>
</body>
</html>

红色加粗的内容就是IE谷歌浏览器获取内部样式表和外部样式表的兼容写法。外部样式表也是可以获得的。为了今后方便调用，我们可以将这个函数单独的封装在独立的js文件中，使用时直接在html文档中引用过来就可以了。

下面说说这段函数的意义：

currentStyle:在IE浏览器下面获取内部样式表和外部样式表中的属性。

使用格式：节点.currentStyle["属性名"]

getComputedStyle:在非IE浏览器下面获取内部样式表和外部样式表中的属性。

使用格式：window.getComputedStyle("节点",null)["属性名"]。

另外，这种兼容写法也可以获取行内样式表的样式。

另外内部样式和外部样式不可更改，换句话说是只读的，如果要更改样式就用（节点.style.属性名 = “新的属性值”）

廉颇易老

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE和谷歌(火狐)浏览器兼容获取内部样式表和外部样式表的样式

内部样式表和外部样式表的样式不能使用节点.style.属性名的方式来获取样式。所以今天学习了IE谷歌之间兼容获取内部样式表和外部样式表的样式的方法。以内部样式表为例：获取内部样式表或外部样式表的样式*{margin: 0;padding: 0;box-sizing:border-box;}#container{width: 400
复制链接

扫一扫