随着浏览器不断的升级改进, CSS 和 JavaScript 之间的界限越来越模糊. 本来它们是负责着完全不同的功能, 但最终, 它们都属于网页前端技术, 它们需要相互密切的合作. 我们的网页中都有. JS 文件和. CSS 文件, 但这并不意味着 CSS 和 JS 是独立不能交互的. 下面要讲的这五种 JavaScript 和 CSS 共同合作的方法你也许未必知道!
用 JavaScript 获取伪元素 (pseudo-element) 属性
大家都知道如何通过一个元素的 style 属性获取它的 CSS 样式值, 但能获取伪元素 (pseudo-element) 的属性值吗? 可以的, 使用 JavaScript 也可以访问页面中的伪元素.
- // Get the color value of .element:before
- var color = Windows.getComputedStyle(
- document.querySelector('.element'), ':before'
- ).getPropertyValue('color');
- // Get the content value of .element:before
- var content = Windows.getComputedStyle(
- document.querySelector('.element'), ':before'
- ).getPropertyValue('content');
看见了吗, 我能访问伪元素里的 content 属性值. 如果你想创建一个动态的, 风格别致的网站, 这是一种非常有用的技术!
classList API
很多的 JavaScript 工具库里都有 addClass,removeClass 和 toggleClass 等方法. 为了对老式浏览器的兼容, 这些类库采用的方法都是先搜索元素的 className, 追加和删除这个类, 然后更新 className. 其实有一个新型的 API 提供了添加, 删除和反转 CSS 类属性的方法, 叫做 classList:
- myDiv.classList.add('myCssClass'); // Adds a class
- myDiv.classList.remove('myCssClass'); // Removes a class
- myDiv.classList.toggle('myCssClass'); // Toggles a class
大多数的浏览器里很早就实现了 classListAPI, 而且最终 IE10 里也实现了它.
直接对样式表进行添加和删除样式规则
我们都非常熟悉使用 element.style.propertyName 来修改样式, 使用 JavaScript 能帮助我们做到这些, 但你知道如何新增或修一个现有的 CSS 样式规则吗? 其实非常的简单.
- function addCSSRule(sheet, selector, rules, index) {
- if(sheet.insertRule) {
- sheet.insertRule(selector + "{" + rules + "}", index);
- }
- else {
- sheet.addRule(selector, rules, index);
- }
- }
- // Use it!
- addCSSRule(document.styleSheets[0], "header", "float: left");
这种方法通常是用来创建一个新的样式规则, 但如果你想修改一个现有的规则, 也可以这样做.
加载 CSS 文件
延迟加载图片, JSON, 脚本等是用来加快页面显示速度的好方法. 我们可以使用 curl.JS 等这样 JavaScript 加载器来延迟加载这些外部资源, 可你知道 CSS 样式表也可以延迟加载吗, 而且在加载成功后回调函数会给予通知.
- curl(
- [
- "namespace/MyWidget",
- "css!namespace/resources/MyWidget.css"
- ],
- function(MyWidget) {
- // 你可以对 MyWidget 进行操作
- // 这里没有对这个 CSS 文件引用, 因为不需要;
- // 我们只需要它已经加载到页面上了
- }
- });
本网站使用的 PrismJS 语法高亮脚本就是延迟加载的. 当所有的资源都加载后, 回调函数就会触发, 我可在回调函数里加载它. 非常有用!
CSS 鼠标指针事件
CSS 鼠标指针事件 pointer-events 属性非常的有趣, 它的功效非常像 JavaScript, 当你把这个属性设置为 none 时, 它能有效的阻止禁止这个元素, 你也许会说 "这又如何?", 但事实上, 它是禁止了这个元素上的任何 JavaScript 事件或回调函数!
.disabled { pointer-events: none; }
点击这个元素, 你会发现任何你放置在这个元素上的监听器都不会触发任何事件. 一个神奇的功能, 真的 -- 你不在需要为了防止某个事件会被触发而去检查某个 CSS 类是否存在.
就是这 5 给你也许还没有发现的 CSS 和 JavaScript 交互的方法. 你还有新的发现吗? 分享出来!
(英文: 5 Ways that CSS and JavaScript Interact That You May Not Know About.)
来源: http://www.webhek.com/post/ways-css-javascript-interact.html