Js获取获取样式的常见方式-js教程-PHP中文网

我们知道在JS里如果要操作CSS，那么最重要的就是获取样式，下面就给大家带来一篇JS获取样式最常见的几种方法，给大家作为参考。

Document div{ color:yellow; } This is div 登录后复制 通过使用element.style属性来获取

var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red 登录后复制 element.style属性只能获取行内样式，不能获取 标签中的样式，也不能获取外部样式

由于element.style是元素的属性，我们可以对属性重新赋值来改写元素的显示。

var div = document.getElementsByTagName("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundColor); //green 登录后复制 2.通过getComputedStyle和currentStyle来获取样式

getComputedStyle的使用环境是chrome/safari/firefox IE 9,10,11

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow 登录后复制 currentStyle在IE里能得到完美支持，chrome不支持，ff不支持

var div = document.getElementsByTagName("div")[0]; var styleObj = div.currentStyle; console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow 登录后复制 3.ele.style和getComputedStyle或者currentStyle的区别

3.1 ele.style是读写的，而getComputedStyle和currentStyle是只读的

3.2 ele.style只能得到行内style属性里面设置的CSS样式，而getComputedStyle和currentStyle还能得到其他的默认值

3.3 ele.style得到的是style属性里的样式，不一定是最终样式，而其他两个得到的是元素的最终CSS样式

4.获取样式兼容性写法

//获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名 function getStyle(obj,attr){ //针对IE if(obj.currentStyle){ return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值 }else{ //针对非IE return window.getComputedStyle(obj,false)[attr]; } } function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } .window.getComputedStyle(ele[,pseudoElt]); 登录后复制 第二个参数如果是null或者省略，则获取得到是ele的CSSStyleDeclaration对象

如果是一个伪类，则获取到的是伪类的CSSStyleDeclaration对象

div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; } div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; } This is div var btn = document.querySelector('#btn'); btn.onclick = function(){ var div = document.querySelector('#myDiv'); var styleObj = window.getComputedStyle(div,'after'); console.log(styleObj['width']); } 登录后复制

getPropertyValue获取CSSStyleDeclaration对象中的指定属性值

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color")); getPropertyValue(propertyName);中的propertyName不能是驼峰式表示 obj.currentStyle['margin-left'] 有效 obj.currentStyle['marginLeft'] 有效 window.getComputedStyle(obj,null)['margin-left'] 有效 window.getComputedStyle(obj,null)['marginLeft'] 有效 window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效 window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效 obj.currentStyle.width 有效 obj.currentStyle.background-color 无效 obj.currentStyle.backgroundColor 有效 window.getComputedStyle(obj,null).width 有效 window.getComputedStyle(obj,null).background-color 无效 window.getComputedStyle(obj,null).backgroundColor 有效 登录后复制 综上，就是带有"-"的属性不能直接点出来，所以有getProperty Value方法 来处理，但是可以用[]来取代getPropertyValue

7.defaultView

在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过 window对象 调用。但有一种情况，你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 (iframe)

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

Js获取获取样式的常见方式