关于javascript:使用-JavaScript-来动态操作-css-你知道几种方法

38次阅读

共计 7594 个字符,预计需要花费 19 分钟才能阅读完成。

作者:areknawo
译者:前端小智
起源:css-tricks.com


点赞再看,微信搜寻 【大迁世界】 关注这个没有大厂背景,但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。

JavaScript 能够说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩大了它的个性集,更加丰盛界面交互的可操作性。这类 API 的例子包含WebGL APICanvas APIDOM API,还有一组不太为人所知的 CSS API

因为 JSX 和有数 JS 框架 的呈现,使通过 JS APIDOM交互的想法真正流行起来,然而在 CSS 中应用相似技术仿佛并没有很多。当然,存在像 CSS-in-JS 这类解决方案,然而最风行的解决方案还是基于 转译 (transpilation),无需额定运行即可生成 CSS。这必定对性能有益处,因为CSS API 的应用可能导致额定的重绘,这与 DOM API 的应用一样。但这不是咱们想要的。如果哪天公司要求咱们,既要操纵 DOM 元素的款式和 CSS 类,还要像应用 HTML 一样应用 JS 创立残缺的样式表,该怎么办?

内联款式

在咱们深刻一些简单的常识之前,先回来顾一下一些基础知识。例如,咱们能够通过批改它的 .style 属性来编辑给定的 HTMLElement 的内联款式。

const el = document.createElement('div')

el.style.backgroundColor = 'red'
// 或者 
el.style.cssText = 'background-color: red'
// 或者
el.setAttribute('style', 'background-color: red')

间接在 .style 对象上设置款式属性将须要应用 驼峰式 命名作为属性键,而不是应用 短横线命名 。如果咱们须要设置更多的内联款式属性,则能够通过设置.style.cssText 属性,以更加高效的形式进行设置。

请记住 给 cssText 设置后原先的 css 款式被清掉了,因而,要求咱们一次死一堆款式。

如果这种设置内联款式过于繁琐,咱们还能够思考将 .styleObject.assign()一起应用,以一次设置多个款式属性。

// ...
Object.assign(el.style, {
    backgroundColor: "red",
    margin: "25px"
})

这些“基本知识”比咱们设想的要多得多。.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) // 'background-color'
    const value = el.style.getPropertyValue(name) // 're'
    const priority = el.style.getPropertyPriority(name) // 'important'
    
    if(priority === 'important') {el.style.removeProperty()
    }
}

这里有个小窍门 - 在遍历过程中 .item() 办法具备按索引拜访模式的备用语法。

// ...
el.style.item(0) === el.style[0]; // true

CSS 类

接着,来看看更高级的构造——CSS 类,它在检索和设置时具备字符串模式是.classname

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

设置类字符串的另一种办法是设置 class 属性(与检索雷同)。然而,就像应用 .style.cssText 属性一样,设置 .className 将要求咱们在字符串中包含给定元素的所有类,包含已更改和未更改的类。

当然,能够应用一些简略的字符串操作来实现这项工作,还有一种就是应用较新的 .classList 属性,这个属性,IE9 不反对它,而 IE10 和 IE11 仅局部反对它

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);
    }
});

Stylesheets

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

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

通过打印后果咱们能够晓得,每次循环打印的是 CSSStyleSheet 对象,每个 CSSStyleSheet 对象由下列属性组成:

属性 形容
media 获取以后款式作用的媒体。
disabled 关上或禁用一张样式表。
href 返回 CSSStyleSheet 对象连接的样式表地址。
title 返回 CSSStyleSheet 对象的 title 值。
type 返回 CSSStyleSheet 对象的 type 值,通常是 text/css。
parentStyleSheet 返回蕴含了以后样式表的那张样式表。
ownerNode 返回 CSSStyleSheet 对象所在的 DOM 节点,通常是 <link> 或 <style>。
cssRules 返回样式表中所有的规定。
ownerRule 如果是通过 @import 导入的,属性就是指向示意导入的规定的指针,否则值为 null。IE 不反对这个属性。

CSSStyleSheet 对象办法:

办法 形容
insertRule() 在以后样式表的 cssRules 对象插入 CSS 规定。
deleteRule() 在以后样式表删除 cssRules 对象的 CSS 规定。

有了 StyleSheetList 的全部内容,咱们来 CSSStyleSheet 自身。在这里就有点意思了,CSSStyleSheet扩大了 StyleSheet 接口,并且只有这种只读属性,如 .ownerNode.href.title.type,它们大多间接从申明给定样式表的中央获取。回忆一下加载内部 CSS 文件的规范 HTML 代码,咱们就会明确这句话是啥意思:

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="Styles">
</head>

当初,咱们晓得 HTML 文档能够蕴含多个样式表,所有这些样式表都能够蕴含不同的规定,甚至能够蕴含更多的样式表 (当应用@import 时)。CSSStyleSheet有两个办法:、.insertrule().deleterule() 来减少和删除 Css 规定。

// ...
const ruleIndex = styleSheet.insertRule("div {background-color: red}");
styleSheet.deleteRule(ruleIndex);

.insertRule(rule,index): 此函数能够在 cssRules 规定汇合中插入一个指定的规定,参数 rule 是标示规定的字符串,参数 index 是值规定字符串插入的地位。

deleteRule(index): 此函数能够删除指定索引的规规定,参数 index 规定规定的索引。

CSSStyleSheet也有本人的两个属性:.ownerRule.cssRule。尽管.ownerRule@import相干,但比拟乏味的是 .cssRules 。简略地说,它是CSSRuleListCSSRule,能够应用后面提到的 .insertrule().deleterule()办法批改它。请记住,有些浏览器可能会阻止咱们从不同的起源 (域) 拜访内部 CSSStyleSheet 的 .cssRules 属性。

那么什么是 CSSRuleList

CSSRuleList是一个数组对象蕴含着一个有序的 CSSRule 对象的汇合。每一个 CSSRule 能够通过 rules.item(index) 的模式拜访, 或者 rules[index]。这里的rules 是一个实现了 CSSRuleList 接口的对象,index是一个基于 0 开始的,程序与 CSS 样式表中的程序是统一的。款式对象的个数是通过 rules.length 表白。

对于 CSSStyleRule 对象:

每一个样式表 CSSStyleSheet 对象能够蕴含若干 CSSStyleRule 对象,也就是 css 款式规定,如下:

<style type="text/css">
  h1{color:red}
  div{color:green}
</style>

在下面的代码中 style 标签是一个 CSSStyleSheet 样式表对象,这个样式表对象蕴含两个 CSSStyleRule 对象,也就是两个 css 款式规定。

CSSStyleRule对象具备下列属性:

1.type: 返回 0-6 的数字,示意规定的类型,类型列表如下:

0:CSSRule.UNKNOWN_RULE。

1:CSSRule.STYLE_RULE(定义一个 CSSStyleRule 对象)。

2:CSSRule.CHARSET_RULE(定义一个 CSSCharsetRule 对象,用于设定以后样式表的字符集,默认与以后网页雷同)。

3:CSSRule.IMPORT_RULE(定义一个 CSSImportRule 对象,就是用 @import 引入其余的样式表)

4:CSSRule.MEDIA_RULE(定义一个 CSSMediaRule 对象,用于设定此款式是用于显示器,打印机还是投影机等等)。

5:CSSRule.FONT_FACE_RULE(定义一个 CSSFontFaceRule 对象,CSS3 的 @font-face)。

6:CSSRule.PAGE_RULE(定义一个 CSSPageRule 对象)。

2.cssText: 返回一个字符串,示意的是以后规定的内容,例如:

div{color:green}

3.parentStyleSheet: 返回所在的 CSSStyleRule 对象。

4.parentRule: 如果规定位于另一规定中,该属性援用另一个 CSSRule 对象。

5.selectorText: 返回此规定的选择器,如下面的 div 就是选择器。

6.style: 返回一个 CSSStyleDeclaration 对象。

// ...
const ruleIndex = styleSheet.insertRule("div {background-color: red}");
const rule = styleSheet.cssRules.item(ruleIndex);

rule.selectorText; // "div"
rule.style.backgroundColor; // "red"

实现

当初,咱们对 CSS 相干的 JS Api有了足够的理解,能够创立咱们本人的、小型的、基于运行时的 CSS-in-JS 实现。咱们的想法是创立一个函数,它传递一个简略的款式配置对象,生成一个新创建的 CSS 类的哈希名称供当前应用。

实现流程很简略,咱们须要一个可能拜访某种样式表的函数,并且只需应用 .insertrule() 办法和款式配置就能够运行了。先从样式表局部开始:

function createClassName(style) {
  // ...
  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;
  }
  // ...
}

如果你应用的是 ESM 或任何其余类型的 JS 模块零碎,则能够在函数内部平安地创立样式表实例,而不用放心其他人对其进行拜访。然而,为了演示例,咱们将 stylesheet 上的 .CSSInJS 属性设置为标记的模式,通过标记来判断是否要应用它。

当初,如果如果还须要创立一个新的样式表怎么办?最好的抉择是创立一个新的 <style/> 标记,并将其附加到 HTML 文档的 <head/> 上。这会主动将新样式表增加到 document.styleSheets 列表,并容许咱们通过 <style/> 标记的 .sheet 属性对其进行拜访,是不是很机智?

function createRandomName() {const code = Math.random().toString(36).substring(7);
  return `css-${code}`;
}

function phraseStyle(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("")}}`;
}

除了下面的小窍门之外。天然,咱们首先须要一种为 CS​​S 类生成新的随机名称的办法。而后,将款式对象正确地表白为可行的 CSS 字符串的模式。这包含驼峰命名和短横线全名之间的转换,以及可选的像素单位(px)转换的解决。

function createClassName(style) {const className = createRandomName();
  let styleSheet;
  // ...
  styleSheet.insertRule(`.${className}${phraseStyle(style)}`);
  return className;
}

残缺代码如下:

HTML

<div id="el"></div>

JS

function createRandomName() {const code = Math.random().toString(36).substring(7);
  return `css-${code}`;
}

function phraseStyle(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("")}}`;
}

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}${phraseStyle(style)}`);
  return className;
}

const el = document.getElementById("el");

const redRect = createClassName({
  width: 100,
  height: 100,
  backgroundColor: "red"
});

el.classList.add(redRect);

运行成果:

总结

正如本文咱们所看到的,应用 JS 操作 CSS 是一件十分乏味的事,咱们能够开掘很多好用的 API, 下面的例子只是冰山一角,在 CSS API(或者更确切地说是 API) 中还有更多办法,它们正等着被揭开神秘面纱。


原文:https://css-tricks.com/an-int…

编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。


交换

文章每周继续更新,能够微信搜寻 【大迁世界】 第一工夫浏览,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,欢送 Star。

正文完
 0