(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 像素 */
    }
}

posted @ 2018-11-01 13:59 耶梦加德阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

我即狂澜，且力不可挽

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

公告