1、"元素.style.样式属性名" ->oDiv.style.height
弊端:"只能"获取在"行内"上编写过的样式,不管在哪些了对应的样式,只要没有在行内上写过,都获取不到
oDiv.style.height 由于height并没有写在行内样式上(写在样式表里了),所以获取的结果依然是""
2、通过 window.getComputedStyle 获取所有经过浏览器计算的样式(只要的你的元素在浏览器加载的时候渲染过,能够在页面中展示,那么当前元素的所有的样式都是经过浏览器计算的,哪怕你没有写)
window.getComputedStyle(要操作的元素,元素的伪类(JS一般不用->null)) ->这个获取到的结果是一个对象数据类型的值(CSSStyleDeclaration内置类的一个实例),里面包含了我们所有经过浏览器计算过的样式属性名和属性值
我们想获取其中某一个样式的值,只需要对象.属性名即可->获取的结果根据自身的情况是带这个单位的
var obj = window.getComputedStyle(oDiv, null);
虽然上述的方法很好用,但是在IE6~8下不兼容 ->currentStyle
var obj = oDiv.currentStyle;
function getCss(curEle, attr) {//getCss:获取指定元素的某一个样式属性的值 cureEle当前要操作的元素 attr当前需要获取样式的属性名
var val = null, reg = null;
if ("getComputedStyle" in window) {
val = window.getComputedStyle(curEle, null)[attr];
} else {
if (attr === "opacity") {
//对于我们的IE6~8浏览器,透明度这个样式,它使用的不是opacity,而是filter,在部分浏览器中我们如果通过opacity获取透明度的话是获取不到的
val = curEle.currentStyle["filter"];
reg = /^alpha(opacity=((?:d|(?:[1-9]d+))(?:.d+)?))$/;
var tempVal = reg.exec(val);
val = tempVal ? tempVal[1] / 100 : 1; //filter是把opacity的值*100得到的,我们还需要把得到的值/100才和我们的opacity保持统一
} else {
val = curEle.currentStyle[attr];
}
}
reg = /^[+-]?(d|([1-9]d+))(.d+)?(px|pt|em|rem)$/; //如果获取的是数字+单位 我们把单位去掉 否则获取的是什么 我们就返回什么
return reg.test(val) ? parseFloat(val) : val;
}
var a = getCss(oDiv, "opacity");
console.log(a);