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]对应的值
*/
function getCss(curEle,attr){
var val = null;
//<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>2
if("window.getCo<a href="https://www.jb51.cc/tag/mpu/" target="_blank" class="keywords">mpu</a>tedStyle" in window){//或者window.getCo<a href="https://www.jb51.cc/tag/mpu/" target="_blank" class="keywords">mpu</a>tedStyle
var = window.getCo<a href="https://www.jb51.cc/tag/mpu/" target="_blank" class="keywords">mpu</a>tedStyle(curEle,null)[attr];
}else{
var = curEle.currentStyle[attr];
}
//<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>1
try{
var = window.getCo<a href="https://www.jb51.cc/tag/mpu/" target="_blank" class="keywords">mpu</a>tedStyle(curEle,null)[attr];
}catch(e){
var = curEle.currentStyle[attr];
}
//<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>3
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
var = curEle.currentStyle[attr];
}else{
var = window.getCo<a href="https://www.jb51.cc/tag/mpu/" target="_blank" class="keywords">mpu</a>tedStyle(curEle,null)[attr];
}
return val;
}</pre>标准浏览器和IE浏览器获取的结果还是不一样的->对于部分样式属性，不同浏览器获取的结果不一样，主要是由于getComputedStyle和currentStyle在某些方面不一样
对于复合的样式值可以拆开来获取
console.log(getCss(Box,"marginTop"))
上面的getCss还没有写完，下面进行
第一次升级
：把获取的样式值“单位去掉”（只有符合“数字+单位/数字”才可以使用parseFloat） return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>的值是不能去单位的，例如：float position margin padding border 这些复合值 background
}</pre>第二次升级：有些样式属性在不同的浏览器中是不兼容的，例如opacity
}else{
val = curEle.currentStyle[attr];
}
}else{
//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>透明度需要使用filter
val = window.getCo<a href="https://www.jb51.cc/tag/mpu/" target="_blank" class="keywords">mpu</a>tedStyle(curEle,null)[attr];
}
}</pre>在补充一个小的知识点:伪类
:before :after 在一个元素便签的前面或者后面创建一个新的虚拟标签，我们可以给这个虚拟标签增加样式，也可以增加内容等...也可以通过伪类来进行清除浮动 可以通过如下方式获取 window.getComputedStyle(Box,"before").content
以上这篇js 获取元素的具体样式信息getcss(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/js/38110.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
