DOM基础知识（七）

CSS行间样式表

• dom.style ( 可读写 没有兼容性问题 )

• 写入的值必须是字符串格式

• 组合单词变成小驼峰式写法

• 复合属性尽量拆解

• 对于float这种保留字属性，前面加css

  • eg : float --> cssFloat

脚本化CSS

• 查询计算样式 ( 只读 低于IE9的浏览器不兼容 )

  • window.getComputedStyle(elem, null);

  • 返回的计算样式的值都是绝对值，没有相对单位，故称计算样式

    // html
    <div style="width: 10em"></div>
    // js
    window.getComputedStyle(div, null).width;  // "160px"
  

  • 可以使用第二个参数读取伪元素的样式

    // html
    <div></div>
  
    // css
    div {
      width: 200px;
      height: 200px;
      background-color: #000;
    }
    div::after {
      content: '';
      width: 100px;
      height: 100px;
      display: block;
      background-color: red;
    }
  
    // js
    var oDiv = document.getElementsByTagName('div')[0];
    window.getComputedStyle(oDiv, 'after').width        // "100px"
  

  • 返回elem元素所展示出的所有样式，包含行间样式、样式默认值等

    // html
    <div style="width: 100px; height: 100px;background-color: red;"></div>
  
    // css
    div { width: 200px !important; }
  
    // js
    var oDiv = document.getElementsByTagName('div')[0];
    oDiv.style.width                                      // 100px
    window.getComputedStyle(oDiv, null).width             // 200px
  

• 对于低于IE9版本的浏览器

  • 查询计算样式( 只读 )使用 : elem.currentStyle

  • 但是返回值并不是经过转换的绝对值