DOM 是不能直接修改 CSS 层叠样式表，只能修改标签的 style 属性

  1. <html>
  2. <style type="text/css">
  3.     div {
  4.         width: 100px;
  5.         height: 100px;
  6.         background-color: green;
  7.     }
  8. </style>
  10. <body>
  11.     <div></div>
  12.     <script type="text/javascript">
  13.         var oDiv = document.getElementsByTagName('div')[0];
  14.     </script>
  15. </body>
  17. </html>

不能操作 CSS，也不能访问 CSS （内嵌样式、外部引用样式），
DOM 是通过标签 style 样式（只能访问行内样式）属性来改变元素的样式

elem.style.xxx

DOM 使用 style 属性来间接修改元素样式，属性的名字要使用小驼峰的方式

  1. oDiv.style.width = "200px";
  2. oDiv.style.height = "200px";
  3. oDiv.style.backgroundColor = "200px";
  • style 这个属性是可读可写 （再次强调只针对行内样式）
  • 属性的值是字符串
  • 复合值一定要拆解赋值
    • oDiv.style.border = ‘5px solid #000’ 不建议这样写
    • 应该能过拆解的方式 (非常重要)
      • oDiv.style.borderWidth = ‘5px’;
        oDiv.style.borderStyle = ‘solid’;
        oDiv.style.borderColor = ‘#000’;
  • 存在保留字，要在保留字前加上 css
    • float（关于 CSS 目前仅有）属性应该为 cssFloat （规范）
      • oDiv.style.cssFloat = ‘left’；

  • oDiv.style -> CSSStyleDeclaration

    window.getComputedStyle

    返回元素样式

  • 显示值

  • 默认值（没有设置的值）
  • 值为绝对值
    • 如颜色为 #000 会转为 rbga(0,0,0,0)

DOM2 和 DOM3
计算样式是只读的

IE8 以下兼容

不支持，使用 elem.currentStyle，要封装兼容性方法
DOM兼容性