如何更好的使用js？
JavaScript 可以说是交互之王，它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集，更加丰富界面交互的可操作性。这类 API 的例子包括WebGL API、Canvas API、DOM API，还有一组不太为人所知的 CSS API。
由于JSX和无数JS框架的出现，使通过JS API与DOM交互的想法真正流行起来，但是在 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 = ' padding: 0px; max-width: 1000%; box-sizing: border-box !important; word-wrap: break-word !important; text-align: left; font-size: 14px; white-space: pre; display: flex; position: relative; font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;">// 或者el.setAttribute('style', ' padding: 0px; max-width: 100%; box-sizing: border-box; font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; color: rgb(33, 37, 41); line-height: 1.75em; word-wrap: break-word !important;">直接在.style对象上设置样式属性将需要使用驼峰式命名作为属性键，而不是使用短横线命名。 如果咱们需要设置更多的内联样式属性，则可以通过设置.style.cssText属性，以更加高效的方式进行设置 。请记住，给cssText设置后原先的css样式被清掉了，因此，要求咱们一次死一堆样式 。如果这种设置内联样式过于繁琐，咱们还可以考虑将.style与Object.assign()一起使用，以一次设置多个样式属性。
// ...Object.assign(el.style, { backgroundColor: "red", margin: "25px"})这些“基本知识”比咱们想象的要多得多。.style对象实现CSSStyleDeclaration接口。这说明它带还有一些有趣的属性和方法，这包括刚刚使用的.cssText，还包括.length（设置属性的数量），以及.item()、.getPropertyValue()和.setPropertyValue()之类的方法：// ...const propertiesCount = el.style.lengthfor(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]; // trueCSS 类
接着，来看看更高级的结构——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不支持这个属性。 |
CSS Style Sheet对象方法:
| 方法 | 描述 |
|---|---|
| insertRule() | 在当前样式表的 cssRules 对象插入CSS规则。 |
| deleteRule() | 在当前样式表删除 cssRules 对象的CSS规则。 |
有了StyleSheetList的全部内容，咱们来CSS StyleSheet本身。 在这里就有点意思了，CSS StyleSheet扩展了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 {styleSheet.deleteRule(ruleIndex);.insertRule(rule,index):此函数可以在cssRules规则集合中插入一个指定的规则，参数rule是标示规则的字符串，参数index是值规则字符串插入的位置。deleteRule(index):此函数可以删除指定索引的规规则，参数index规定规则的索引。CSSStyleSheet也有自己的两个属性：.ownerRule和.cssRule。虽然.ownerRule与@import相关，但比较有趣的是.cssRules。简单地说，它是CSSRuleList的CSSRule，可以使用前面提到的.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 {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("")}}`;}除了上面的小窍门之外。 自然，咱们首先需要一种为CSS类生成新的随机名称的方法。然后，将样式对象正确地表达为可行的CSS字符串的形式。 这包括驼峰命名和短横线全名之间的转换，以及可选的像素单位（px）转换的处理。
function createClassName(style) { const className = createRandomName(); let styleSheet; // ... styleSheet.insertRule(`.${className}${phraseStyle(style)}`); return className;}完整代码如下：HTML
<div id="el"></div>JSfunction 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)中还有更多方法，它们正等着被揭开神秘面纱。如何更好的使用js？的更多相关文章
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- 如何在2016年成为一个更好的Node.js开发者
本文主要讨论一些进行Node.js开发的最佳实践和建议,这些建议不仅仅适合开发者,还适合那些管理与维护Node.js基础架构的工作人员.遵循本文提供的这些建议,能够让你更好的进行日常的开发工作. St ...
- 微软开放技术发布针对 Mac 和 Linux 的更新版 Azure Node.JS SDK 和命令行工具
发布于 2013-12-04 作者 Eduard Koller 这次为我们使用Linux 的朋友带来了更多关于部署云上虚拟机的消息.今天,微软开放技术有限公司 (MS Open Tech),想与大家分 ...
- 更靠谱的js判断浏览器及其版本
所有的前端开发人员都没有办法回避一个问题,那就是浏览器版本判断,当我们无法回避需要进行浏览器版本判断时,前辈们往往会告诉我们,可以判断 UserAgent这个用来标示浏览器的字符串,通过判断这一字符串 ...
- 比官方文档更易懂的Vue.js教程！包你学会！
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门> ...
- 几个你所不知道的技巧助你写出更优雅的vue.js代码
1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ ...
- 如何更好的理解js中的this，分享2段有意思的代码
关于js中this的浅析,大家可以点击[彻底理解js中this的指向,不必硬背]这篇博客了解. 今天遇到2段比较有意思的代码. ----------------第一段----------------- ...
- 更通俗的理解JS原型链
最近在网上看到一篇理解原型链的,感觉非常好非常通俗易懂,拿来记录一下~: 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他 ...
随机推荐
- isset和empty，isset和unset,__isset和__unset
1.isset() 用来检测变量是否存在,如果变量存在,且值不等于零,返回ture empty() 用来检测是否为空,如果变量值值为"".0."0".NULL. ...
- InfoGan笔记
InfoGAN: Interpretable Representation Learning by Information Maximizing Generative Adversarial Nets ...
- Python小知识点+保留字
注意 !/usr/bin/python # -- coding: UTF-8 -- #中文编码 Python空行:函数之间或类的方法之间用空行分隔,表示一段新的代码的开始 Python注释:单行注释采 ...
- exit status 1
- 【scratch3.0教程】1.3 了解scratch界面内容
第3课 了解Scratch界面内容 1.认识Scratch界面 双击桌面快捷方式,启动Scratch程序.我们来认识一下Scratch界面吧! (1)指令区 Scratch程序一共有运动.外观.声音. ...
- quartz2.3.0（五）制定错过执行任务的misfire策略，用pause，resume模拟job暂停执行和继续执行
感谢兄台: <quartz-misfire 错失.补偿执行> misfire定义 misfire:被错过的执行任务策略 misfire重现——CronTrigger job任务类: pac ...
- 整理：史上最简单的 MySQL 教程
1 前言 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数据,而转变成 ...
- FreeRTOS优先级翻转
举例 //高优先级任务的任务函数 void high_task(void *pvParameters) { while(1) { vTaskDelay(500); //延时500ms,也就是500个时 ...
- 操作系统systemctl命令
目录 预热 管理单个 unit 查看系统上的 unit 管理不同的操作环境(target unit) 检查 unit 之间的依赖性 相关的目录和文件 systemctl daemon-reload 子 ...
- [LeetCode] 581. 最短无序连续子数组 ☆
描述 给定一个整数数组,你需要寻找一个连续的子数组,如果对这个子数组进行升序排序,那么整个数组都会变为升序排序. 你找到的子数组应是最短的,请输出它的长度. 示例 1: 输入: [2, 6, 4, 8 ...