/ classList

五种鲜为人知的 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 库都封装了 addClassremoveClasstoggleClass 方法来操作元素的 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+ 也支持。

参考:

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

通过 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