隨著瀏覽器不斷的升級(jí)改進(jìn)，CSS和JavaScript之間的界限越來(lái)越模糊。本來(lái)它們是負(fù)責(zé)著完全不同的功能，但最終，它們都屬于網(wǎng)頁(yè)前端技術(shù)，它們需要相互密切的合作。我們的網(wǎng)頁(yè)中都有.js文件和.css文件，但這并不意味著CSS和js是獨(dú)立不能交互的。下面要講的這五種JavaScript和CSS共同合作的方法你也許未必知道！

用JavaScript獲取偽元素(pseudo-element)屬性

大家都知道如何通過一個(gè)元素的style屬性獲取它的CSS樣式值，但能獲取偽元素(pseudo-element)的屬性值嗎？可以的，使用JavaScript也可以訪問頁(yè)面中的偽元素。

復(fù)制代碼 代碼如下:

<span>// 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');</span>

復(fù)制代碼 代碼如下:

<span>myDiv.classList.add('myCssClass'); // Adds a class
myDiv.classList.remove('myCssClass'); // Removes a class
myDiv.classList.toggle('myCssClass'); // Toggles a class</span>

復(fù)制代碼 代碼如下:

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

復(fù)制代碼 代碼如下:

<span>curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// 你可以對(duì)MyWidget進(jìn)行操作
// 這里沒有對(duì)這個(gè)CSS文件引用，因?yàn)椴恍枰?
// 我們只需要它已經(jīng)加載到頁(yè)面上了
}
});</span>

復(fù)制代碼 代碼如下:

<span>.disabled { pointer-events: none; }</span>