【前端】-031-DOM编程-样式操作

2017-02-22  本文已影响97人  9756a8680596

CSS DOM概述

通过JavaScript语言,使用DOM对象接口,动态的修改CSS内容,到达对页面样式进行变更。
整个页面的所有CSS样式还可以通过 document.styleSheets 进行获取

CSS DOM

CSS DOM操作

  1. CSS的定义方式
  1. 内部样式表操作
  1. 行内样式表操作

    • body中的p元素
    • 使用p.style对样式直接操作
      var p = document.getElementsByTagName(“p”); //获取元素
      p.style.color; //返回 p元素css样式,属性名为color的值,字符串,“red”
      p.style.cssText; //返回p元素的css样式内容,字符串表示,即“color: red;"
  2. 更新CSS样式

    • 直接更新style的对应属性值
      • p.style.color = "blue;"
      • 缺点:
        a. 属性是需要按照驼峰格式书写,不符合CSS规范;
        b. 更新一个属性就需要一个语句,很麻烦;
    • 直接写CSS样式
      • p.style.cssText = "color: blue; border: 1px solid red"
      • 缺点:CSS样式混在JavaScript代码中,可维护性差
    • 通过更新元素样式的class值
      • 首先,在页面中增加新的样式class,例如.newClass{...}
      • 然后,在JavaScript代码中设置元素的class样式属性,p.className += newClass;
      • 缺点:一次只能更新一个样式,如果有多个样式需要更新不方便,且要提前写到HTML代码中
    • 更新样式表方法
      • 首先,将变化后的样式(新增或删除)单独写在一个样式表文件(.css)中
      • 然后,通过变更link元素的href属性值即可完成批量样式更改操作
  3. 获取CSS样式属性值

    • p.style.color获取的样式为元素行内样式,即只有在元素的style属性里设置的才能被获取,如果通过linkstyle方式设置的样式值无法获取
    • var style = window.getComputedStyle(p);,能获取元素的实际样式,获取的返回值为实际样式的属性名和属性值键值对 ,只能读取不能修改
      • 获取的实际为 CSSStyleDeclaration 的实例对象;
      • 此方法不支持 IE9 以下版本,IE9中需使用 element.currentStyle 来做兼容。
上一篇下一篇

猜你喜欢

热点阅读