Netherspite

内联样式

几种常见的给HTML元素添加CSS的CSS API如下。

const el = document.createElement('div');

el.style.backgroundColor = 'red';
//or
el.style.cssText = 'background-color: red';
//or
el.setAttribute('style', 'background-color: red')；

直接在.style对象上设置样式属性需要写成驼峰式命名，而.cssText更高效，但会覆盖原先的CSS样式。也可以一起使用Object.assign与.style一次添加多个样式。

.style对象实现CSSStyleDeclaration接口，除了cssText之外还有length属性、item方法、getPropertyValue方法以及setPropertyValue方法等。

const propertiesCount = el.style.length;
for(let i = 0; i < propertiesCount; i++) {
  const name = el.style.item(i);//or el.style[i]
  const value = el.style.getPropertyValue(name);
  const priority = el.style.getPropertyPriority(name);
  
  if(priority === 'important') {
    el.style.removeProperty(name);
  }
}

CSS类

CSS类在检索和设置时具有字符串形式，className。className与cssText类似，会覆盖原先的class，所以在className中必须给出完整的类名。

el.className = 'class-one class-two';
el.setAttribute('class', 'class-one class-two');

除了className之外还有classList属性，其实现了DOMTokenList，有add、remove、toggle、replace等方法来更改当前的CSS类集合，同时也有item、entries、foreach接口来实现遍历。

const classNames = ["class-one", "class-two", "class-three"];
classNames.forEach(className => {
  if(!el.classList.contains(className)) {
    el.classList.add(className);
  }
});

Stylesheet

Web API还有一个StyleSheetList接口，该接口由document.styleSheets属性实现。这是一个只读属性，返回由StyleSheet对象组成的StyleSheetList，每个StyleSheet对象都是一个文档中链接或嵌入的样式表。

for(styleSheet of document.styleSheets) {
  console.log(styleSheet);
}

CSS StyleSheet对象

属性 描述
cssRules 返回样式表中的所有规则，CSSRuleList对象，包含length属性和CSSStyleRule对象
disabled 样式表是否禁用
href 返回样式表的地址
media 获取当前样式表作用的媒体
ownerNode 返回该对象所在的DOM节点，一般是<link>或<style>
ownerRule 如果是@import导入的，属性就是指向表示导入的规则的指针，否则为null（IE不支持）
parentStyleSheet 返回了包含当前样式表的父样式表
rules 同cssRules，区别见下方
title 返回CSSStyleSheet对象的title值
type 返回CSSStyleSheet对象的type值，一般是text/css

对于<link>元素引用外部样式表，Chrome不能通过cssRules属性和rules属性获取其中的CSS规则，而Firefox和IE可以。通过<style>元素添加的样式信息，三种浏览器都可以通过cssRules属性获得其中的样式规则。

CSSStyleSheet对象的方法有insertRule和deleteRule，可以增加和删除样式表。insertRule(rule, index)此方法可以再cssRules规则合集中插入一个指定的规则，参数rule是标示规则的字符串，index是规则字符串插入的位置。deleteRule只有一个参数index，删除指定索引的规则。

CSS StyleRule对象

CSS StyleRule是CSSRuleList对象存储的对象，包含属性：

  • type：0-6的数字
    • 0：STYLE_UNKNOWN_RULE，未知类型
    • 1：STYLE_RULE，CSS StyleRule对象
    • 2：CHARSET_RULE，CSS CharsetRule对象，设定当前样式表的字符集，默认与网页一致
    • 3：IMPORT_RULE，CSS ImportRule对象，用@import引入其他的样式表
    • 4：MEDIA_RULE，CSS MediaRule对象，用于设定此样式用于的设备
    • 5：FONT_FACE_RULE，CSS FontFaceRule对象，CSS3的@font-face
    • 6：PAGE_RULE，CSS PageRule对象
  • cssText：返回样式的cssText
  • parentRule：如果规则位于另一规则中，则返回引用另一个CSS Rule对象
  • selectorText：返回此规则的选择器
  • style：返回CSS StyleDeclaration对象

实例

function createClassName(style) {
  const className = createRandomName();
  let styleSheet;
  for(let i = 0; i < document.styleSheets.length; i++) {
    if(document.styleSheets[i].CSSInJS) {
      styleSheet = document.styleSheets[i];
      break;
    }
  }
  if(!styleSheet) {
    const style = document.createElement('style');
    document.head.appendChild(style);
    styleSheet = style.sheet;
    styleSheet.CSSInJS = true;
  }
  styleSheet.insertRule(`.${className}${parseStyle(style)}`);
  return className;
}
function createRandomName() {
  const code = Math.random().toString(36).substring(7);
  return `css-${code}`;
}
function parseStyle(style) {
  const keys = Object.keys(style);
  const keyValue = keys.map(key => {
    const kebabCaseKey = key.replace(/([a-z])([A-Z]/g, '$1-$2').toLowerCase();
    const value = `${style[key]}${typeof style[key] === 'number' ? 'px' : ''}`;
    return `${kebabCaseKey}:${value}`;
  });
  return `{${keyValue.join('')}}`;
}

const el = document.getElementById('el');
const redRect = createClassName({
  width: 100,
  height: 100,
  backgroundColor: 'red'
});
el.classList.add(redRect);

 上一页

JavaScript

 评论