计算后的样式

计算后的样式: 标识HTML 元素各种选择器的综合作用下, 最终样式

1.1 高级浏览器

不兼容ie 6 7 8
getComputedStyle(): 功能获取所有的样式 (1)
getPropertyValue(): 获取具体的样式 (2)
调用对象: window
参数: 要读取的元素对象
返回值: 所有计算后的样式集合

//获取元素对象
var oBox = document.getElementById("box")
console.log(oBox.style.width);//返回空白
//解析, 因为在这里style 只能读取行内样式,不能读取块级样式
var oPic = document.getElementById("pic")

解决办法1… 使用中括号 还可以使用中括号

//解析: 用法2 还可以使用中括号来获取
console.log(window.getComputedStyle(oPic)["border-width"]);
console.log(window.getComputedStyle(oPic)["width"]);

解决办法2 …
返回值可以继续打点调用getPropertyValue() 的方法
参数: 属性名
返回值: 属性值
单一属性可以用书写短横语法

//解析:getComputedStyle()继续打点再使用getPropertyValue()可以读取块级样式
window.getComputedStyle(oPic).getPropertyValue("width");

1.2 IE 6 7 8 方法

IE6 7 8 不认识window.getComputedStyle()
CurrentStyle:
调用对象
返回值: 样式集合
想得到属性值 , 需要继续打点调用属性名 (如果是单一属性 使用驼峰命名法 )
解决办法1

// 直接点语法 ,进行样式读取
oBox.innerHTML = oPic.currentStyle.width;

解决办法2 : 使用中括号

oBox.innerHTML = oPic.currentStyle["borderColor"];

1.3 能力检测

检测浏览器是否认识 window.getComputedStyle , 返回值 true , 不认识返回 false

<div class="box" id="box"></div>
<img src="./images/ad_3.jpg" alt="" id="pic">
  <script type="text/javascript">
    //获取元素对象
    var oBox = document.getElementById("box")
var oPic = document.getElementById("pic")
//将img 边框宽度输出
oBox.innerHTML = getValue("border-width", oPic);
//函数思维   以下2个方面考虑    用户输入属性名 , 和对象, 我们可以返回值该对象计算后的属性值
//参数  border-width  ,borderWindth
//返回值
function getValue(property, obj) {
  if (window.getComputedStyle) {
    //高级
    //将属性名改为短横写法
    property = property.replace(/([A-Z])/g,function (match, $1) {
      return "-" + $1.toLowerCase();
    });
    //将属性值返回
    return window.getComputedStyle(obj)[property];
  } else {
    //IE  border-width改为驼峰 borderWindth
    property = property.replace(/-([a-z])/g, function (match, $1) {
      return $1.toUpperCase();
    });
    //将属性值返回
    return obj.currentStyle[property];
  };
};
</script>