获取元素的具体样式信息
标签（空格分隔）： 未分类
引子：前面的属性都是组合的宽高，那么如何获取一个div的宽或者高
1.元素.style.属性名
需要我们把元素的样式都写在行内样式上；
2.使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式；
所有经过浏览器计算过的样式；只要当前的元素标签可以在页面中呈现出来，那么他的所有样式都是经过浏览器计算过的（渲染过的） --- 即使有些样式并没有设置；我们也可以获取到；
console.log(window.getComputedStyle(box,null).width); //box是当前要操作的元素对象，null是当前元素的伪类，一般不用写none；
//获取到的结果：CSSStyleDeclaration 这个类的一个实例，包含当前样式的所有样式和属性
3.ie6-8不兼容解决；因为window下没有getComputedStyle,在IE6-8会报错；
//在ie6-8可以使用currentStyle来获取所有经过浏览器计算过的样式
console.log(box.currentStyle.width);
//获取当前所有浏览器计算过的样式中的[attr]
//curEle当前要操作的对象，attr我们要获取的样式的名称
//1.使用try catch;
functio getCss(curEle,attr){
var val = null;
try {
val = window.getComputedStyle(curEle,null)[attr];
} catch (e) {
val = curEle.currentStyle[attr]
}
return val;
}
//需要保证try代码在不兼容浏览器中必须报错2.必须执行两次代码，浪费性能；
改进版2.0；
\\检测window下是否包含getComputdStyle这个属性
function getCss(curEle,attr){
if ("getComputedStyle" in window){
var = window。getComputedStyle(curEle,null)
}else{
val = curEle.currentStyle[attr]
}
return val;
}
function getCss(curEle,attr){
if (window.getComputedStyle){
var = window.getComputedStyle(curEle,null)
}else{
val = curEle.currentStyle[attr]
}
return val;
}
3.通过检测浏览器版本和类型来处理兼容
function getCss(curEle,attr){
if (/MSIE(6|7|8/.test(navigator.userAgent) )){
val = curEle.currentStyle[attr]
}else{
var = window.getComputedStyle(curEle,null)
}
return val;
}
对于部分样式属性，不同的浏览器获取的结构不一样，比如font-familufont-family;border;margin
因此写CSS进来第一步初始化默认样式，1.可以避免不同浏览器的差异，而且对js获取同一，也有帮助；
2.把复合值拆开使用；
升级
getCSS方法获取的值带px;
//把获取到的样式的单位值去掉
//只有数字加单位的才可以使用parseFloat;
function getCss(curEle,attr){
var val = null,reg = null;
if ("getComputedStyle" in window){
val = window.getComputedStyle(curEle,null)
}else{
val = curEle.currentStyle[attr]
}
reg = /^(-?\d+(\.\d)?)(px|pt|rem|em)?$/i
return reg.test(val)?parseFloat(val):val;
}
两种写法的不同
var val = null,reg=null;
var val = reg = null; //reg是全局变量
浏览器不兼容某些元素：如opacity;
function getCss(curEle,attr){
var val = null,reg = null;
if ("getComputedStyle" in window){
val = window.getComputedStyle(curEle,null)
}else{
if(attr === "opacity"){
val = curEle.currentStyle["filter"];
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i
}else{
val = curEle.currentStyle[attr];
}
}
reg = /^(-?\d+(\.\d)?)(px|pt|rem|em)?$/i
return reg.test(val)?parseFloat(val):val;
}
