DOM - 获取当前样式和IE兼容 / 开普饭

获取当前样式

我们先来复习一下之前是如何获取当前style样式的

比如body中有这样一个div

<head> <meta charset="utf-8"> <title>Document</title> <style> #div1{ background-color: red; }</style></head><body> <div id="div1" style="width:300px; height:300px; "></div></body>

我们来获取一下它style中的高：

<script> window.onload = function(){ var oDiv = document.getElementById("div1"); alert(oDiv.style.height); }</script>

运行结果如下：

但是如果我们想要获取背景颜色，是获取不到的

我们用同样的方法写一下

注意：

之前讲过的获取背景颜色时要把 – 改为首字母大写

<script> window.onload = function(){ var oDiv = document.getElementById("div1"); alert(oDiv.style.backgroundColor); }</script>

运行结果如下：

这是因为我们将样式写在了head标签中的style标签里了，并没有写在div标签的行内样式中，所以我们获取不到

我们可以将height写在head中的style标签中试一下

<style> #div1{ background-color: red; height:300px; }</style>

同样用刚才的方法获取

<script> window.onload = function(){ var oDiv = document.getElementById("div1"); alert(oDiv.style.height); }</script>

运行结果如下：

这里看到height也获取不到了

也就是说，我们通过上述操作只能找到行内的CSS样式

getComputedStyle

如何获取当前所有的有效样式呢？

就需要用到getComputedStyle

格式：

getComputedStyle( 元素节点 )[ 获取样式类型 ];

还是上面的例子，我们来改一下：

</head> <body> <div id="div1" style="width:300px; "></div> </body></html>

运行结果如下：

注意：

1.这是获取当前有效的样式，也就是显示出效果的那个样式

比如写了两个一样的样式，因为有优先级，所以他会只获取有效的那个

2.外链的样式也是不能获取的

3.这个效果IE浏览器是不支持的

IE中使用它获取样式

★★★

如何解决IE不兼容它的问题呢？

就需要使用下面的语句格式：

元素节点.currentStyle[ 获取样式类型 ];

注意：

这里需要做浏览器兼容操作，通过一个三目运算符完成

function getStyle(elem,attr){

//elem获取谁的样式；attr获取哪个样式

return elem.currentStyle ? elem.currentStyle[arrt] : getComputedStyle(elem)[arrt]

这里返回先看currenStyle是否存在

若存在，就代表是IE浏览器，就需要使用current来获取

若不存在，就使用Computed普通获取方式

}

我们来看一下完整的代码：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Document</title> <style> #div1{ background-color: red; height:300px; }</style> <script> window.onload = function(){ var oDiv = document.getElementById("div1"); //alert(oDiv.style.height); //alert(getComputedStyle(oDiv)["height"]); alert(getStyle(oDiv,"height")); } //获取当前样式的兼容： function getStyle(elem,attr){ //elem获取谁的样式；attr获取哪个样式 return elem.currentStyle ? elem.currentStyle[arrt] : getComputedStyle(elem)[arrt]; /* 这里返回先看currenStyle是否存在 若存在，就代表是IE浏览器，就需要使用current来获取 若不存在，就使用Computed普通获取方式 */ }</script>

</head> <body> <div id="div1" style="width:300px; "></div> </body></html>

运行结果和上面一样：

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web

DOM - 获取当前样式和IE兼容

相关推荐