读写样式属性

elem.style.xxx

  1. .box{
  2.   width: 200px;
  3. }
  4. <div class='box'></div>
  5. var oDiv=document.getElementsByTagName('div');
  6. 此时访问oDiv.style.width 结果为空,也证实了DOM不能操作css
  7. oDiv.style.width='200px';
  8. 此时再访问就可以得到200px了
  9. 复合值要拆分赋值

image.png
保留字要加’css’: oDiv.style.cssFloat=’left’
查看css属性的方法：oDIv.style
查看计算样式：ie8一下不支持 elem.currentStyle

image.png

查看计算属性的封装方法

  1. function getStyles(elem,prop){
  2.   if(window.getComputedStyle){
  3.     if(prop){
  4.       return window.getComputerStyle(elem,null)[prop];
  5.     }else{
  6.       return window.getComputedStyle(elem,null);
  7.     }
  8.   }else{
  9.     if(prop){
  10.       return elem.currentStyle[prop];
  11.     }else{
  12.       return elem.currentStyle;
  13.     }
  14.   }
  15. }
  17. oDiv.onclick=function(){
  18.   //var width=this.offsetWidth; offset会加上padding等其他数据，所有一般都不用
  19.   var width=parseInt(getStyle(this.'width'));
  20.   this.style.width=width+'10'+'px';
  21. }

offsetWidth、offsetHeight

odiv.offsetWidth //可以计算出div元素的宽高
HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度，offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

计算伪元素的方法

  1. div::after {
  2.   content: "";
  3.   display: block;
  4.   width: 50px;
  5.   height: 50px;
  6.   background-color: pink;
  7. }
  8. var oDiv=document.getElementsByTagName('div')[0];
  9. window.getComputedStyle(div,'after').width //'50px'

image.png