登录
目录
当前位置： 首页 > 文档资料 > JavaScript 标准参考手册 >

CSS操作

优质
小牛编辑
180浏览
2023-12-01

CSS与JavaScript是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如果通过JavaScript操作CSS。

  • HTML元素的style属性
  • Element节点的style属性
    • 基本用法
    • cssText属性
    • CSS模块的侦测
    • setPropertyValue()，getPropertyValue()，removeProperty()
  • CSS伪元素
  • StyleSheet对象
    • 获取样式表
    • 属性
    • insertRule()，deleteRule()
    • 添加样式表
  • CSS规则
    • CSSRule接口
    • CSSStyleRule接口
    • CSSMediaRule接口
    • CSSStyleDeclaration对象
  • window.getComputedStyle()
  • window.matchMedia()
    • 基本用法
    • 监听事件
  • CSS事件
    • transitionEnd事件
    • animationstart事件，animationend事件，animationiteration事件
  • 参考链接

    • HTML元素的style属性

    操作Element节点的CSS样式，最简单的方法之一就是使用节点对象的getAttribute方法、setAttribute方法和removeAttribute方法，读写或删除HTML元素的style属性。

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

    Element节点的style属性

    基本用法

    Element节点本身还提供style属性，用来操作CSS样式。

    style属性指向一个对象，用来读写页面元素的行内CSS样式。

    var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';

divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

    从上面代码可以看到，style对象的属性与CSS规则名一一对应，但是需要改写。具体规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写，比如background-color写成backgroundColor。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串“css”，比如float写成cssFloat。

    注意，style对象的属性值都是字符串，而且包括单位。所以，divStyle.width不能设置为100，而要设置为'100px'。

    cssText属性

    style对象的cssText可以用来读写或删除整个style属性。

    divStyle.cssText = 'background-color:red;'
  + 'border:1px solid black;'
  + 'height:100px;'
  + 'width:100px;';

    注意，cssText对应的是HTML元素的style属性，所以不用改写CSS属性名。

    CSS模块的侦测

    CSS的规格发展太快，新的模块层出不穷。不同浏览器的不同版本，对CSS模块的支持情况都不一样。有时候，需要知道当前浏览器是否支持某个模块，这就叫做“CSS模块的侦测”。

    一个比较普遍适用的方法是，判断某个DOM元素的style对象的某个属性值是否为字符串。

    typeof element.style.animationName === 'string';
typeof element.style.transform === 'string';

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

    document.body.style['maxWidth'] // ""
document.body.style['maximumWidth'] // undefined

    需要注意的是，不管CSS属性名带不带连词线，style对象都会显示该属性存在。

    document.body.style['backgroundColor'] // ""
document.body.style['background-color'] // ""

    所有浏览器都能用这个方法，但是使用的时候，需要把不同浏览器的CSS规则前缀也考虑进去。

    var content = document.getElementById("content");
typeof content.style['webkitAnimation'] === 'string'

    这种侦测方法可以写成一个函数。

    function isPropertySupported(property){
  if (property in document.body.style) return true;
  var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
  var prefProperty = property.charAt(0).toUpperCase() + property.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

    此外，部分浏览器（Firefox 22+, Chrome 28+, Opera 12.1+）目前部署了supports API，可以返回一个布尔值，表示是否支持某条CSS规则。但是，这个API还没有成为标准。

    CSS.supports('transform-origin', '5px');
CSS.supports('(display: table-cell) and (display: list-item)');

    setPropertyValue()，getPropertyValue()，removeProperty()

    style对象的以下三个方法，用来读写行内CSS规则。

    • setPropertyValue(propertyName,value)：设置某个CSS属性。
    • getPropertyValue(propertyName)：读取某个CSS属性。
    • removeProperty(propertyName)：删除某个CSS属性。

    这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。

    divStyle.setProperty('background-color','red');
divStyle.getPropertyValue('background-color');
divStyle.removeProperty('background-color');

    CSS伪元素

    CSS伪元素是通过CSS向DOM添加的元素，主要方法是通过“:before”和“:after”选择器生成伪元素，然后用content属性指定伪元素的内容。

    以如下HTML代码为例。

    <div id="test">Test content</div>

    CSS添加伪元素的写法如下。

    #test:before {
  content: 'Before ';
  color: #FF0;
}

    DOM节点的style对象无法读写伪元素的样式，这时就要用到window对象的getComputedStyle方法（详见下面介绍）。JavaScript获取伪元素，可以使用下面的方法。

    var test = document.querySelector('#test');

var result = window.getComputedStyle(test, ':before').content;
var color = window.getComputedStyle(test, ':before').color;

    此外，也可以使用window.getComputedStyle对象的getPropertyValue方法，获取伪元素的属性。

    var result = window.getComputedStyle(test, ':before')
  .getPropertyValue('content');
var color = window.getComputedStyle(test, ':before')
  .getPropertyValue('color');

    StyleSheet对象

    获取样式表

    StyleSheet对象代表网页的一张样式表，它包括link节点加载的样式表和style节点内嵌的样式表。

    document对象的styleSheets属性，可以返回当前页面的所有StyleSheet对象（即所有样式表）。它是一个类似数组的对象。

    var sheets = document.styleSheets;
var sheet = document.styleSheets[0];

    此外，link节点和style节点的sheet属性，也可以获取StyleSheet对象。

    // HTML代码为
// <link id="linkElement" href="http://path/to/stylesheet">
// <style id="styleElement">
//   body{font-size: 1.2 rem;}
// </style>

// 等同于document.styleSheets[0]
document.querySelector('#linkElement').sheet

// 等同于document.styleSheets[1]
document.querySelector('#styleElement').sheet

    属性

    StyleSheet对象有以下属性。

    （1）media属性

    media属性表示这个样式表是用于屏幕（screen），还是用于打印（print），或两者都适用（all）。该属性只读，默认值是screen。

    document.styleSheets[0].media.mediaText
// "all"

    （2）disabled属性

    disabled属性用于打开或关闭一张样式表。

    document.querySelector('#linkElement').disabled = true;

    disabled属性只能在JavaScript中设置，不能在html语句中设置。

    （3）href属性

    href属性是只读属性，返回StyleSheet对象连接的样式表地址。对于内嵌的style节点，该属性等于null。

    document.styleSheets[0].href

    （4）title属性

    title属性返回StyleSheet对象的title值。

    （5）type属性

    type属性返回StyleSheet对象的type值，通常是text/css。

    document.styleSheets[0].type  // "text/css"

    （6）parentStyleSheet属性

    CSS的@import命令允许在样式表中加载其他样式表。parentStyleSheet属性返回包括了当前样式表的那张样式表。如果当前样式表是顶层样式表，则该属性返回null。

    if (stylesheet.parentStyleSheet) {
    sheet = stylesheet.parentStyleSheet;
} else {
    sheet = stylesheet;
}

    （7）ownerNode属性

    ownerNode属性返回StyleSheet对象所在的DOM节点，通常是或。对于那些由其他样式表引用的样式表，该属性为null。

    // HTML代码为
// <link rel="StyleSheet" href="example.css" type="text/css" />

document.styleSheets[0].ownerNode // [object HTMLLinkElement]

    （8）cssRules属性

    cssRules属性指向一个类似数组的对象，里面每一个成员就是当前样式表的一条CSS规则。使用该规则的cssText属性，可以得到CSS规则对应的字符串。

    var sheet = document.querySelector('#styleElement').sheet;

sheet.cssRules[0].cssText
// "body { background-color: red; margin: 20px; }"

sheet.cssRules[1].cssText
// "p { line-height: 1.4em; color: blue; }"

    每条CSS规则还有一个style属性，指向一个对象，用来读写具体的CSS命令。

    styleSheet.cssRules[0].style.color = 'red';
styleSheet.cssRules[1].style.color = 'purple';

    insertRule()，deleteRule()

    insertRule方法用于在当前样式表的cssRules对象插入CSS规则，deleteRule方法用于删除cssRules对象的CSS规则。

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

    insertRule方法的第一个参数是表示CSS规则的字符串，第二个参数是该规则在cssRules对象的插入位置。deleteRule方法的参数是该条规则在cssRules对象中的位置。

    IE 9开始支持insertRule方法，在此之前都使用addRule方法。addRule的写法与insertRule略有不同，接受三个参数。

    sheet.addRule('p','color:red',1);

    上面代码将一条CSS语句插入p选择器所有语句的第二位。最后一个参数默认为-1，即新增语句插在所有语句的最后。

    添加样式表

    添加样式表有两种方式。一种是添加一张内置样式表，即在文档中添加一个节点。

    var style = document.createElement('style');

style.setAttribute('media', 'screen');
// 或者
style.setAttribute("media", "@media only screen and (max-width : 1024px)");

style.innerHTML = 'body{color:red}';
// 或者
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

document.head.appendChild(style);

    另一种是添加外部样式表，即在文档中添加一个link节点，然后将href属性指向外部样式表的URL。

    var linkElm = document.createElement('link');
linkElm.setAttribute('rel', 'sty规则lesheet');
linkElm.setAttribute('type', 'text/css');
linkElm.setAttribute('href', 'reset-min.css');

document.head.appendChild(linkElm);

    CSS规则

    一条CSS规则包括两个部分：CSS选择器和样式声明。下面就是一条典型的CSS规则。

    .myClass {
  background-color: yellow;
}

    CSSRule接口

    CSS规则部署了CSSRule接口，它包括了以下属性。

    （1）cssText

    cssText属性返回当前规则的文本。

    // CSS代码为
// body { background-color: darkblue; }

var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].cssText
// body { background-color: darkblue; }

    （2）parentStyleSheet

    parentStyleSheet属性返回定义当前规则的样式表对象。

    （3）parentRule

    parentRule返回包含当前规则的那条CSS规则。最典型的情况，就是当前规则包含在一个@media代码块之中。如果当前规则是顶层规则，则该属性返回null。

    （4）type

    type属性返回有一个整数值，表示当前规则的类型。

    最常见的类型有以下几种。

    • 1：样式规则，部署了CSSStyleRule接口
    • 3：输入规则，部署了CSSImportRule接口
    • 4：Media规则，部署了CSSMediaRule接口
    • 5：字体规则，部署了CSSFontFaceRule接口

    CSSStyleRule接口

    如果一条CSS规则是普通的样式规则，那么除了CSSRule接口，它还部署了CSSStyleRule接口。

    CSSRule接口有以下两个属性。

    （1）selectorText属性

    selectorText属性返回当前规则的选择器。

    var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].selectorText // ".myClass"

    （2）style属性

    style属性返回一个对象，代表当前规则的样式声明，也就是选择器后面的大括号里面的部分。该对象部署了CSSStyleDeclaration接口，使用它的cssText属性，可以返回所有样式声明，格式为字符串。

    document.styleSheets[0].cssRules[0].style.cssText
// "background-color: gray;font-size: 120%;"

    CSSMediaRule接口

    如果一条CSS规则是@media代码块，那么它除了CSSRule接口，还部署了CSSMediaRule接口。

    该接口主要提供一个media属性，可以返回@media代码块的media规则。

    CSSStyleDeclaration对象

    每一条CSS规则的样式声明部分（大括号内部的部分），都是一个CSSStyleDeclaration对象，主要包括三种情况。

    • HTML元素的行内样式（）
    • CSSStyleRule接口的style属性
    • window.getComputedStyle()的返回结果

    每一条CSS属性，都是CSSStyleDeclaration对象的属性。不过，连词号需要编程骆驼拼写法。

    var styleObj = document.styleSheets[0].cssRules[1].style;
styleObj.color // "red";
styleObj.fontSize // "100%"

    除了CSS属性以外，CSSStyleDeclaration对象还包括以下属性。

    • cssText：当前规则的所有样式声明文本。该属性可读写，即可用来设置当前规则。
    • length：当前规则包含多少条声明。
    • parentRule：包含当前规则的那条规则，同CSSRule接口的parentRule属性。

    CSSStyleDeclaration对象包括以下方法。

    （1）getPropertyPriority()

    getPropertyPriority方法返回指定声明的优先级，如果有的话，就是“important”，否则就是空字符串。

    var styleObj = document.styleSheets[0].cssRules[1].style;
styleObj.getPropertyPriority('color') // ""

    （2）getPropertyValue()

    getPropertyValue方法返回指定声明的值。

    // CSS代码为
// color:red;

var styleObj = document.styleSheets[0].cssRules[1].style;
styleObj.getPropertyValue('color') // "red"

    （3）item()

    item方法返回指定位置的属性名。

    var styleObj = document.styleSheets[0].cssRules[1].style;
styleObj.item(0) // "color"
// 或者
styleObj[0] // "color"

    （4）removeProperty()

    removeProperty方法用于删除一条CSS属性，返回被删除的值。

    // CSS代码为
// color:red;

var styleObj = document.styleSheets[0].cssRules[1].style;
styleObj.removeProperty('color') // "red"

    （5）setProperty()

    setProperty方法用于设置指定的CSS属性，没有返回值。

    var styleObj = document.styleSheets[0].cssRules[1].style;
styleObj.setProperty('color', 'green', 'important');

    下面是遍历一条CSS规则所有属性的例子。

    var styleObj = document.styleSheets[0].cssRules[0].style;
for (var i = styleObj.length - 1; i >= 0; i--) {
   var nameString = styleObj[i];
   styleObj.removeProperty(nameString);
}

    上面删除了一条CSS规则的所有属性，更简便的方法是设置cssText属性为空字符串。

    styleObj.cssText = '';

    window.getComputedStyle()

    getComputedStyle方法接受一个DOM节点对象作为参数，返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。

    var div = document.querySelector('div');
window.getComputedStyle(div).backgroundColor

    getComputedStyle方法还可以接受第二个参数，表示指定节点的伪元素。

    var result = window.getComputedStyle(div, ':before');

    getComputedStyle方法返回的是一个CSSStyleDeclaration对象。但是此时，这个对象是只读的，也就是只能用来读取样式信息，不能用来设置。如果想设置样式，应该使用Element节点的style属性。

    var elem = document.getElementById("elem-container");
var hValue = window.getComputedStyle(elem,null).getPropertyValue("height");

    window.matchMedia()

    基本用法

    window.matchMedia方法用来检查CSS的mediaQuery语句。各种浏览器的最新版本（包括IE 10+）都支持该方法，对于不支持该方法的老式浏览器，可以使用第三方函数库matchMedia.js。

    CSS的mediaQuery语句有点像if语句，只要显示媒介（包括浏览器和屏幕等）满足mediaQuery语句设定的条件，就会执行区块内部的语句。下面是mediaQuery语句的一个例子。

    @media all and (max-width: 700px) {
  body {
      background: #FF0;
  }
}

    上面的CSS代码表示，该区块对所有媒介（media）有效，且视口的最大宽度不得超过700像素。如果条件满足，则body元素的背景设为#FF0。

    需要注意的是，mediaQuery接受两种宽度/高度的度量，一种是上例的“视口”的宽度/高度，还有一种是“设备”的宽度/高度，下面就是一个例子。

    @media all and (max-device-width: 700px) {
  body {
      background: #FF0;
  }
}

    视口的宽度/高度（width/height）使用documentElement.clientWidth/clientHeight来衡量，单位是CSS像素；设备的宽度/高度（device-width/device-height）使用screen.width/height来衡量，单位是设备硬件的像素。

    window.matchMedia方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有以下两个属性。

    • media：返回所查询的mediaQuery语句字符串。
    • matches：返回一个布尔值，表示当前环境是否匹配查询语句。
    var result = window.matchMedia("(min-width: 600px)");
result.media // (min-width: 600px)
result.matches // true

    下面是另外一个例子，根据mediaQuery是否匹配当前环境，执行不同的JavaScript代码。

    var result = window.matchMedia('@media all and (max-width: 700px)');

if (result.matches) {
  console.log('页面宽度小于等于700px');
} else {
  console.log('页面宽度大于700px');
}

    下面的例子根据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);
}

    监听事件

    window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法。如果mediaQuery查询结果发生变化，就调用指定的回调函数。

    var mql = window.matchMedia("(max-width: 700px)");

// 指定回调函数
mql.addListener(mqCallback);

// 撤销回调函数
mql.removeListener(mqCallback);

function mqCallback(mql) {
  if (mql.matches) {
    // 宽度小于等于700像素
  } else {
    // 宽度大于700像素
  }
}

    上面代码中，回调函数的参数是MediaQueryList对象。回调函数的调用可能存在两种情况。一种是显示宽度从700像素以上变为以下，另一种是从700像素以下变为以上，所以在回调函数内部要判断一下当前的屏幕宽度。

    CSS事件

    transitionEnd事件

    CSS的过渡效果（transition）结束后，触发transitionEnd事件。

    el.addEventListener("transitionend", onTransitionEnd, false);

function onTransitionEnd() {
  console.log('Transition end');
}

    transitionEnd的事件对象具有以下属性。

    • propertyName：发生transition效果的CSS属性名。
    • elapsedTime：transition效果持续的秒数，不含transition-delay的时间。
    • pseudoElement：如果transition效果发生在伪元素，会返回该伪元素的名称，以“::”开头。如果不发生在伪元素上，则返回一个空字符串。

    实际使用transitionend事件时，需要添加浏览器前缀。

    el.addEventListener('webkitTransitionEnd '
  + 'transitionend '
  + 'msTransitionEnd '
  + 'oTransitionEnd ', function(){
  el.style.transition = 'none';
});

    animationstart事件，animationend事件，animationiteration事件

    CSS动画有以下三个事件。

    • animationstart事件：动画开始时触发。
    • animationend事件：动画结束时触发。
    • animationiteration事件：开始新一轮动画循环时触发。如果animation-iteration-count属性等于1，该事件不触发，即只播放一轮的CSS动画，不会触发animationiteration事件。
    div.addEventListener('animationiteration', function() {
  console.log('完成一次动画');
});

    这三个事件的事件对象，都有animationName属性（返回产生过渡效果的CSS属性名）和elapsedTime属性（动画已经运行的秒数）。对于animationstart事件，elapsedTime属性等于0，除非animation-delay属性等于负值。

    var el = document.getElementById("animation");

el.addEventListener("animationstart", listener, false);
el.addEventListener("animationend", listener, false);
el.addEventListener("animationiteration", listener, false);

function listener(e) {
  var li = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      li.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      li.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      li.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(li);
}

    上面代码的运行结果是下面的样子。

    Started: elapsed time is 0
New loop started at time 3.01200008392334
New loop started at time 6.00600004196167
Ended: elapsed time is 9.234000205993652

    animation-play-state属性可以控制动画的状态（暂停/播放），该属性需求加上浏览器前缀。

    element.style.webkitAnimationPlayState = "paused";
element.style.webkitAnimationPlayState = "running";

    参考链接


    免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
    @小牛知识库 xnip.cn