5种JavaScript和CSS交互的方法
web前端开发
共 2375字,需浏览 5分钟
·
2020-10-04 22:39
1、用JavaScript获取伪元素(pseudo-element)属性
// 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');
2、classList API
myDiv.classList.add('myCssClass'); // Adds a class
myDiv.classList.remove('myCssClass'); // Removes a class
myDiv.classList.toggle('myCssClass'); // Toggles a class
3、直接对样式表进行添加和删除样式规则
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");
4、加载CSS文件
curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// 你可以对MyWidget进行操作
// 这里没有对这个CSS文件引用,因为不需要;
// 我们只需要它已经加载到页面上了
}
});
5、CSS鼠标指针事件
.disabled { pointer-events: none; }
评论