![1f7ff512253c72ed670ed6d6c272cc8f.png](https://i-blog.csdnimg.cn/blog_migrate/9d127ad93fd69f5a7846c02efeff6b78.jpeg)
获取当前样式
我们先来复习一下之前是如何获取当前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>
运行结果如下:
![d0ab9fed70abb06427e53c3b70b6fe2a.png](https://i-blog.csdnimg.cn/blog_migrate/2ec128d374f1a48af784c0ba0be7ec13.png)
但是如果我们想要获取背景颜色,是获取不到的
我们用同样的方法写一下
注意:
之前讲过的获取背景颜色时要把 – 改为首字母大写
<script> window.onload = function(){ var oDiv = document.getElementById("div1"); alert(oDiv.style.backgroundColor); }script>
运行结果如下:
![d0ab9fed70abb06427e53c3b70b6fe2a.png](https://i-blog.csdnimg.cn/blog_migrate/2ec128d374f1a48af784c0ba0be7ec13.png)
这是因为我们将样式写在了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>
运行结果如下:
![61a4b0ff95b9459c3eff40366de516cc.png](https://i-blog.csdnimg.cn/blog_migrate/e0fd2ce64457c40b3a207ca2753b2a92.png)
这里看到height也获取不到了
也就是说,我们通过上述操作只能找到行内的CSS样式
![d0ab9fed70abb06427e53c3b70b6fe2a.png](https://i-blog.csdnimg.cn/blog_migrate/2ec128d374f1a48af784c0ba0be7ec13.png)
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>
运行结果如下:
![662ac591f20b3391e1e4d2e44a0b54cb.png](https://i-blog.csdnimg.cn/blog_migrate/04f81002cacfefed32e82fa5c0a70f40.png)
注意:
1.这是获取当前有效的样式,也就是显示出效果的那个样式
比如写了两个一样的样式,因为有优先级,所以他会只获取有效的那个
2.外链的样式也是不能获取的
3.这个效果IE浏览器是不支持的
![d0ab9fed70abb06427e53c3b70b6fe2a.png](https://i-blog.csdnimg.cn/blog_migrate/2ec128d374f1a48af784c0ba0be7ec13.png)
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>
运行结果和上面一样:
![d0ab9fed70abb06427e53c3b70b6fe2a.png](https://i-blog.csdnimg.cn/blog_migrate/2ec128d374f1a48af784c0ba0be7ec13.png)
- 写作不易,大家多多关注,谢谢啦-
![a31d2419a0ede6d142fb0e952a2cffee.png](https://i-blog.csdnimg.cn/blog_migrate/382bc1f5e4d0931006dd4845fdf9e370.jpeg)
---web分享,分享的不只是web