189 8069 5689
小编给大家分享一下js如何获取元素的具体样式信息getcss，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联公司是一家专业提供兴县企业网站建设,专注与成都网站建设、成都网站制作、H5场景定制、小程序制作等业务。10年已为兴县众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
如果想获取元素的某一个具体的样式属性值
1、元素.style.属性名
需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的）
console.log(box.style.height) ->null
在真实项目中，这种方式不常用，因为不能为了获取值而把所有的样式都写在行内（无法实现html和css的分离）
2、使用window.getComputedStyle(当前操作的元素对象，当前元素的伪类【一般我们不用伪类写null】)这个方法获取所有经过浏览器计算过的样式
所有经过浏览器计算过的样式：只要当前的元素标签可以在页面中呈现出来，那么他的所有样式都是经过浏览器计算过的（渲染过的）->哪怕有些样式你没有写，我们也可以获取到
获取的结果是CSSStyleDeclaration这个类的实例：包含了当前元素的所有样式属性和值
console.log(window.getComputedStyle);//function
console.log(window.getComputedStyle(box,null))["height"]
3、方法虽然好用，但是在IE6-8下是不兼容的：因为window下没有getComputedStyle这个属性->会报错
在IE6-8下我们可以使用currentStyle来获取所有经过浏览器计算过的样式
console.log(box.currentStyle)
console.log(box.currentStyle.height)
获取样式的兼容写法getCss：获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值
/*
curEle:[object] 当前要操作的元素对象
attr:[string] 我们要获取的样式属性的名称
1、使用try、catch来处理兼容（只有在不得已的情况下）
前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
获取当前浏览器是IE6-8
*/
function getCss(curEle,attr){
var val = null;
//方法2
if("window.getComputedStyle" in window){//或者window.getComputedStyle
var = window.getComputedStyle(curEle,null)[attr];
}else{
var = curEle.currentStyle[attr];
}
//方法1
try{
var = window.getComputedStyle(curEle,null)[attr];
}catch(e){
var = curEle.currentStyle[attr];
}
//方法3
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
var = curEle.currentStyle[attr];
}else{
var = window.getComputedStyle(curEle,null)[attr];
}
return val;
}console.log(getCss(box,"border")) console.log(getCss(box,"fontFamily"))
标准浏览器和IE浏览器获取的结果还是不一样的->对于部分样式属性，不同浏览器获取的结果不一样，主要是由于getComputedStyle和currentStyle在某些方面不一样
对于复合的样式值可以拆开来获取
console.log(getCss(box,"marginTop"))
上面的getCss还没有写完，下面进行第一次升级：把获取的样式值“单位去掉”（只有符合“数字+单位/数字”才可以使用parseFloat）
function getCss(curEle,attr){
var val = null;
var reg = null;
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
var = curEle.currentStyle[attr];
}else{
var = window.getComputedStyle(curEle,null)[attr];
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能去单位的，例如：float position margin padding border 这些复合值 background
}第二次升级：有些样式属性在不同的浏览器中是不兼容的，例如opacity
function getCss(curEle,attr){
var val = null;
var reg = null;
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
if(attr==="opacity"){
val = curEle.currentStyle["filter"];
//把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
val = reg.test(val)?reg.exec(val)[1]/100:1
}else{
val = curEle.currentStyle[attr];
}
}else{
//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filter
val = window.getComputedStyle(curEle,null)[attr];
}
}在补充一个小的知识点:伪类
:before :after 在一个元素便签的前面或者后面创建一个新的虚拟标签，我们可以给这个虚拟标签增加样式，也可以增加内容等...也可以通过伪类来进行清除浮动 可以通过如下方式获取 window.getComputedStyle(box,"before").content
JavaScript是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，JavaScript是被广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
以上是“js如何获取元素的具体样式信息getcss”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！