获取当前样式
我们先来复习一下之前是如何获取当前style样式的
比如body中有这样一个div
<head> <meta charset="utf-8"> <title>Documenttitle> <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( 元素节点 )[ 获取样式类型 ];
还是上面的例子，我们来改一下：
<html> <head> <meta charset="utf-8"> <title>Documenttitle> <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"]); }script> 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普通获取方式
*/
}
我们来看一下完整的代码：
<html> <head> <meta charset="utf-8"> <title>Documenttitle> <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
本文介绍了如何获取HTML元素的当前样式，特别是在IE浏览器中的兼容性问题。通过getComputedStyle可以获取所有有效样式，但该方法在IE中不被支持。为了解决IE的兼容性，可以使用元素的currentStyle属性。文章提供了getStyle函数，根据浏览器类型选择合适的获取样式方法。
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
