五种鲜为人知的 CSS / JS 交互方式

使用 JavaScript 获取伪元素样式属性

众所周知，JS 可以使用 style 属性获取普通元素的 CSS 样式，那伪元素呢？也是可以的。

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');
// Get the content value of .element:before

var content = window.getComputedStyle(

document.querySelector('.element'), ':before'

).getPropertyValue('content');

实际用例可查看 Device State Detection。

classList API

很多 JavaScript 库都封装了 addClass、removeClass、toggleClass 方法来操作元素的 class。这些方法都是基于操作 className 实现的，HTML5 新增了一个 classList API。

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// if visible is set remove it, otherwise add it

div.classList.toggle("visible");
alert(div.classList.contains("foo"));
div.classList.add("foo","bar"); //add multiple classes

大多数浏览器已经支持 classList，IE10+ 也支持。

参考：

• MDN - element.classList
• IE8/9 支持 - classList.js

直接在样式中添加、删除规则

通过 element.style.propertyName 方法修改元素属性时，会直接添加到行间样式里，其实可以直接读写样式表中的规则。

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

使用JS加载器加载 CSS 文件

资源懒加载技术常常用于图片、JSON、脚本等，样式表也可以懒加载。

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with 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
	}
});

CSS 指针事件（pointer-events）

CSS 指针事件（pointer-events） 属性可以像 JavaScript 一样禁止用户行为。

.disabled { pointer-events: none; }

此时点击该元素，将不会触发监听的事件。

 

via 5 Ways that CSS and JavaScript Interact That You May Not Know About