(90)Wangdao.com第二十三天_JavaScript CSS 操作

CSS 操作

通过 JavaScript 操作 CSS

• HTML 元素的 style 属性

  • <div style="background-color:red; border:1px solid black;" />

• • 使用 .getAttribute() 方法、.setAttribute() 方法和 .removeAttribute() 方法，直接读写或删除网页元素的 style 属性

    • div.setAttribute("style'",
          "background-color:red; border:1px solid black;"
      );

• style 属性的值是一个 CSSStyleDeclaration 实例，用来操作元素的样式，不过，连词号需要变成骆驼拼写法
  • 操作属性时的规则
    • 将横杠从 CSS 属性名中去除，然后将横杠后的第一个字母大写
    • 对象的属性值都是字符串，设置时必须包括单位
    • 如果 CSS 属性名是 JavaScript 保留字，则规则名之前需要加上字符串 css


      • ele.style.backgroundColor    // 对应css 属性 background-color
        
        ele.style.cssFloat    // 对应 css 属性 float

    • 注意：
      • Element.style返回的只是行内样式，并不是该元素的全部样式。
      • 元素的全部样式要通过 window.getComputedStyle(obj, null)["attr"] 得到。（IE8 下使用ele.currentStyle["attr"]）

• • ele.style.实例属性
    • • ele.style.cssText
        • 读写元素的所有行内样式，以字符串形式返回
        • 不用改写 CSS 属性名
        • 清空元素的行内样式，最简便的方法就是设置 cssText 为空字符串

          • <div id="ele" style="background:yellow"></div>

            ele.style.cssText;    // 返回字符串 "background:yellow"

            ele.style.cssText = "";    // 清空行内样式

• • • • ele.style.length
        • • 返回一个整数值，表示元素行内样式包含多少条样式声明

• • • • ele.style.parentRule
        • • 返回当前规则所属的那个样式块（CSSRule 实例）。如果不存在所属的样式块，该属性返回 null

• • • • • • 属性只读，且只在使用 CSSRule 接口时有意义

• • ele.style.实例方法
    • • ele.style.getPropertyPriority()
        • • 判断元素的某个属性是否加了 important 优先级
          • 以某个属性名作为参数，返回一个字符串
            • 如果该属性设置了 important，则返回 "important"
            • 否则返回空字符串 ""

• • • • ele.style.getPropertyValue()
        • • 返回元素某属性的属性值
          • 以某属性名为参数，返回一个字符串

• • • • ele.style.item()
        • • 接受一个整数值作为参数，返回该索引位置的 CSS 属性名

• • • • ele.style.removeProperty()
        • • 删除行内式某属性，返回被删除属性的旧属性值

• • • • ele.style.setProperty(属性名，属性值，优先级)
        • 设置新的 CSS 属性。没有返回值
        • 优先级可选，唯一合法值：improtant

• CSS 模块的侦测

判断当前浏览器是否支持某个模块

• • element.style.attrName 的返回值
    • 如果该 CSS 属性确实存在
      • 会返回一个字符串
      • 即使该属性实际上并未设置，也会返回一个空字符串
    • 如果该属性不存在，则会返回  undefined

    • 侦测方法1

      • typeof element.style.attrName === 'string';
        
        // 注意，不管 CSS 属性名的写法带不带连词线，style 属性上都能反映出该属性是否存在
        ele.style['backgroundColor']    // ""    === "string"    返回 true
        document.body.style['background-color']    // ""    === "string"    返回 true
        
        // 使用的时候，需要把不同浏览器的 CSS 前缀也考虑进去
        ele.style['-webkit-animation'] === 'string'
        

      • 封装该侦测方法

        • function isPropertySupported(cssPropStr) {
              if (cssPropStr in document.body.style){
                  return true;
              }
              var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
              var prefProperty = cssPropStr.charAt(0).toUpperCase() + cssPropStr.substr(1);
          
              for(var i = 0; i < prefixes.length; i++){
                  if((prefixes[i] + prefProperty) in document.body.style){
                      return true;
                  }
              }
          
              return false;
          }
          
          isPropertySupported('background-clip');    // true

• 浏览器原生提供 CSS 对象，目前有两个静态方法
  • CSS.escape() 
    • 转义 CSS 选择器里面的特殊字符

      document.querySelector('#' + CSS.escape('foo#bar'));
      
      // #号，该字符在 CSS 选择器里面有特殊含义
      // 不能直接写成 document.querySelector('#foo#bar')
      // 只能写成 document.querySelector('#foo\\#bar')    // 这里必须使用双斜杠的原因是，单引号字符串本身会转义一次斜杠

• • CSS.supports()
    • 判断当前环境是否支持某一句 CSS 样式
    • 参数有两种写法
      • 第一个参数是属性名，第二个参数是属性值

        • // 第一种写法
          CSS.supports('transform-origin', '5px');    // true

      • 整个参数就是一行完整的 CSS 语句

        • // 第二种写法
          CSS.supports('display: table-cell');    // true

        • 注意，第二种写法的参数结尾不能带有分号

• 高级浏览器 window.getComputedStyle()
  • 获取元素的实际样式，浏览器计算后得到的最终样式信息
  • 注意：

• • • CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。
      • 比如，长度都是像素单位（返回值包括px后缀），颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。
    • CSS 规则的简写形式无效。
      • 比如，想读取 margin 属性的值，不能直接读，只能读 marginLeft、marginTop 等属性；
      • 再比如，font 属性也是不能直接读的，只能读 font-size 等单个属性。
    • 如果读取 CSS 原始的属性名，要用方括号运算符，比如 ele.style['z-index']；
    • 如果读取骆驼拼写法的 CSS 属性名，可以直接读取 ele.style.zIndex。
    • 该方法返回的 CSSStyleDeclaration 实例的 cssText 属性无效，返回 undefined

• • 它接受一个节点对象作为参数，返回一个 CSSStyleDeclaration 实例（动态对象，只读）

• • 还可以接受第二个参数，表示当前元素的伪元素（比如 :before、:after、:first-line、:first-letter 等）

    • var result = window.getComputedStyle(ele, ':before')["background"];

• CSS 伪元素

通过 CSS 向 DOM 添加的元素

主要是通过 :before 和 :after 选择器生成，然后用 content 属性指定伪元素的内容

• // <div id="test">Test content</div>
  
  #test:before {
      content: 'Before ';
      color: #FF0;
  }
  
  var test = document.getElementById('#test');
  
  // 节点元素的 style 对象无法读写伪元素的样式
  var result = window.getComputedStyle(test, ':before').content;
  var color = window.getComputedStyle(test, ':before').color;

• StyleSheet 对象

代表网页的一张样式表，包括行内样式表，内部样式表，外部样式表

严格来说，不仅包括网页样式表，还包括 XML 文档的样式表

document.styleSheets 返回一个类似数组的对象，代表当前页面的所有 StyleSheet 实例（即所有样式表）

• • 如果是 <style> 元素 的内部样式表，还可以通过 style 元素节点 sheet 属性获取 StyleSheet 对象

    • // <style id="myStyle">
      
      // </style>
      
      var myStyleSheet = document.getElementById('myStyle').sheet;
      myStyleSheet instanceof StyleSheet;    // true

• • StyleSheet 的实例属性
    • • StyleSheet.disabled
        • • 表示该样式表是否处于禁用状态，为 true 时，目标样式不会生效
          • 注意，disabled 属性只能在 JavaScript 脚本中设置，不能在 HTML 语句中设置

• • • • Stylesheet.href
        • • 返回样式表的网址。
          • 对于内嵌样式表，该属性返回 null
          • 属性只读

            • document.styleSheets[0].href

• • • • StyleSheet.media
        • • 返回一个类似数组的对象（MediaList实例），成员是表示适用媒介的字符串。
          • 表示当前样式表是用于屏幕（screen），还是用于打印（print）或手持设备（handheld），或各种媒介都适用（all）
          • 该属性只读，默认值是 screen
          • MediaList.appendMedium()，用于增加媒介
          • MediaList.deleteMedium()，用于删除媒介

• • • • StyleSheet.cssRules
        • 指向一个类似数组的对象（CSSRuleList实例），里面每一个成员就是当前样式表的一条 CSS 规则

• 实例方法
  • CSSStyleSheet.insertRule()
    • • 用于在当前样式表的插入一个新的 CSS 规则

• • • • 第一个参数是表示 CSS 规则的字符串，这里只能有一条规则，否则会报错。
      • 第二个参数是该规则在样式表的插入位置（从0开始），该参数可选，默认为0（即默认插在样式表的头部）。
        • 注意，如果插入位置大于现有规则的数目，会报错

          var sheet = document.querySelector('#styleElement').sheet;
          sheet.insertRule('#block { color: white }', 0);
          sheet.insertRule('p { color: red }', 1);

          浏览器对脚本在样式表里面插入规则有很多限制。所以，这个方法最好放在 try...catch 里使用

• CSSRule 实例的属性
  • CSSRule.cssText
  • CSSRule.parentStyleSheet
  • CSSRule.parentRule
  • CSSRule.type    表示当前样式规则的类型

• • • • 1        普通样式规则（CSSStyleRule 实例）
      • 3        @import规则
        • • media 属性        返回代表@media规则的一个对象
          • conditionText 属性        返回@media规则的生效条件

            • // HTML 代码如下
              // <style id="myStyle">
              //   @media screen and (min-width: 900px) {
              //     article { display: flex; }
              //   }
              // </style>
              var styleSheet = document.getElementById('myStyle').sheet;
              styleSheet.cssRules[0] instanceof CSSMediaRule
              // true
              
              styleSheet.cssRules[0].media
              //  {
              //    0: "screen and (min-width: 900px)",
              //    appendMedium: function,
              //    deleteMedium: function,
              //    item: function,
              //    length: 1,
              //    mediaText: "screen and (min-width: 900px)"
              // }
              
              styleSheet.cssRules[0].conditionText
              // "screen and (min-width: 900px)"

      • 4        @media规则（CSSMediaRule 实例）
      • 5        @font-face规则

• window.matchMedia()
  • 创建 MediaQueryList 对象来存放媒体查询的结果
  • 用来将 CSS 的 MediaQuery 条件语句，转换成一个 MediaQueryList 实例
    • 设置一个查询列表用来判定设备屏幕处于横屏还是竖屏

      • var mql = window.matchMedia("(orientation: portrait)");

  • mql.media
    • 属性返回一个字符串，表示对应的 MediaQuery 条件语句

      • var mql = window.matchMedia('(min-width: 400px)');
        mql.media    // "(min-width: 400px)"

• • mql.matches
    • 返回一个布尔值，表示当前页面是否符合指定的 MediaQuery 条件语句
    • 通过检查相应查询的 matches 属性来获取查询结果，上述属性会直接返回查询结果
    • 下面的例子根据 mediaQuery 是否匹配当前环境，加载相应的 CSS 样式表

      • var result = window.matchMedia("(max-width: 700px)");
        
        if (result.matches){
            var linkElm = document.createElement('link');
            linkElm.setAttribute('rel', 'stylesheet');
            linkElm.setAttribute('type', 'text/css');
            linkElm.setAttribute('href', 'small.css');
        
            document.head.appendChild(linkElm);
        }

  • mql.onchange
    • 如果 mql 条件语句的适配环境发生变化，会触发 change 事件

      • var mql = window.matchMedia('(max-width: 600px)');
        
        mql.onchange = function(e) {
            if (e.matches) {
                /* 视口不超过 600 像素 */
            } else {
                /* 视口超过 600 像素 */
            }
        }

      • 上面代码中，change事件发生后，存在两种可能。

        • 一种是显示宽度从700像素以上变为以下

        • 另一种是从700像素以下变为以上，

      • 所以在监听函数内部要判断一下当前是哪一种情况

• MediaQueryList 接口的实例方法
  • MediaQueryList.addListener()

• • MediaQueryList.removeListener()

• • • var mql = window.matchMedia('(max-width: 600px)');
      
      // 指定监听函数
      mql.addListener(mqCallback);
      
      // 撤销监听函数
      mql.removeListener(mqCallback);
      
      function mqCallback(e) {
          if (e.matches) {
              /* 视口不超过 600 像素 */
          } else {
              /* 视口超过 600 像素 */
          }
      }