你可能不知道的5种 CSS 和 JS 的交互方式

英文原文： 5 Ways that CSS and JavaScript Interact That You May Not Know About
译文地址：http://blog.csdn.net/renfufei/article/details/18665457

CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊。两者所完成的功能差异非常明显，但说到底他们都是前端技术，所以确实需要紧密地配合。

虽然我们将代码拆分到独立的 .js 文件和 .css 文件中，但他们之间还能进行一些更密切的交互，这些通常是普通JS框架所不支持的。

下面是你可能不知道的CSS和JS的交互的5种方式:

使用JavaScript获取CSS伪元素属性

我们可以通过DOM元素的 style 属性获取基本的CSS样式值，但怎么获取CSS伪元素属性呢? 确实，JavaScript提供了相应的API：

// 获取 .element:before 的 color 值  
var color = window.getComputedStyle(  
    document.querySelector('.element'), ':before'  
).getPropertyValue('color');  
  
  
// 获取 .element:before 的 content 值  
var content = window.getComputedStyle(  
    document.querySelector('.element'), ':before'  
).getPropertyValue('content');

你可以查看作者的博客文章: Device State Detection，如果你想创建动态，独特的网站那会非常有用。

在最受欢迎的JS框架中，我们可以使用 addClass , removeClass ，以及 toggleClass 方法来处理 class 列表。为了兼容旧版本浏览器，每个框架都会先获取元素的 className属性(类型为String) 并添加/移除相应的 class，然后再更新 className 字符串。现在，有一个新的API可以用来高效地添加、删除、切换 class，名为 classList:

myDiv.classList.add('myCssClass'); // 添加 class  
myDiv.classList.remove('myCssClass'); // 移除 class  
myDiv.classList.toggle('myCssClass'); // 切换 class

大多数浏览器支持 classList 已经好几年了，但是 IE 很杯具的在 10.0 版本才开始支持。

直接操作样式表

我们对于使用 element.style.propertyName 这种形式的方法修改样式都很熟悉，并可以通过 JavaScript 工具来处理，但你知道怎样在新的和已存在的 stylesheets 中读取和写入样式规则吗? 这个API也是很简单的:

function addCSSRule(sheet, selector, rules, index) {  
    // 注意 sheet 的新 API   
    if(sheet.insertRule) {  
        sheet.insertRule(selector + "{" + rules + "}", index);  
    }  
    else {  
        sheet.addRule(selector, rules, index);  
    }  
}  
  
  
// 调用!  
addCSSRule(document.styleSheets[0], "header", "float: left");

通常是使用此种方式来创建一个新的样式表，但如果你想修改一个现有的样式表也可以，快试试吧！

使用 Loader 加载 CSS 文件

对图片，JSON，以及JS脚本的懒加载是减少页面显示时间的有效方法。我们可以通过 curl.js 或者 jQeury 库加载这些外部资源，但你知道如何懒加载样式表并在加载完成后触发回调函数么?

curl(  
    [  
        "namespace/MyWidget",  
        "css!namespace/resources/MyWidget.css"  
    ],   
    function(MyWidget) {  
        // 使用 MyWidget 进行  
        // The CSS reference isn't in the signature because we don't care about it;  
        // we just care that it is now in the page  
    }  
});

本博客的原文就使用懒加载导入了 PrismJS，基于 pre 元素实现文字的高亮显示. 在所有资源(包括css)加载完成后，会调用回调函数，这应该是很有用的。

CSS 的 pointer-events 属性

CSS pointer-events 属性扮演了一种类似 JavaScript 的方式, 如果 pointer-events 值为 none 则禁用某个元素，不为 none 则允许元素的常用功能。可能你会问: "这有什么用?" 好处是 pointer-events 能高效地阻止触发 JavaScript 事件。

.disabled { pointer-events: none; }

在元素上的 click 以及通过 addEventListener 添加的回调函数都不会被触发。这真是一个完美的属性，真的 —— 你在回调函数中不需要先检测 className 以决定某些分支。

上面列举了CSS与Javascript交互的5种方式,还有更多的交互方式吗？欢迎您进行分享！

你可能不知道的5种 CSS 和 JS 的交互方式