个人专栏 ES6 深入浅出已上线,深入ES6 ,通过案例学习掌握 ES6 中新特性一些使用技巧及原理,持续更新中,←点击可订阅。
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
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 = 'background-color: red' // 或者 el.setAttribute('style', 'background-color: red')
直接在.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.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'