【JS】761- JS 和 CSS 交互的 5 种方法
前端自习课
共 2589字,需浏览 6分钟
·
2020-10-29 12:33
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; }
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 80+ 篇原创文章
评论
Orderjs模块化管理 js 和 css
Orderjs是一个JS按需、异步加载工具,同时也是JS模块化管理工具,让您随心所欲地整合网上各类开源代码。支持IE6+,Firefox,Chrome等主流浏览器。Orderjs致力于让js异步加载变
Orderjs模块化管理 js 和 css
0
Sid按需加载JS和CSS库
Sid是一个轻量级的JS库,用来在根据需要的时候才去加载js脚本文件和css样式文件。示例代码:Sid.js('my-module.js',function(){myModule.init();});
Sid按需加载JS和CSS库
0
JSS-cssinjs高性能 JS to CSS 编译器
JSS 是一种比 CSS 更强大的抽象,它使用 JavaScript 以声明和可维护的方式描述样式。
JSS-cssinjs高性能 JS to CSS 编译器
0
JSS-cssinjs高性能 JS to CSS 编译器
JSS是一种比CSS更强大的抽象,它使用JavaScript以声明和可维护的方式描述样式。它是一个高性能的JStoCSS编译器,可在运行时和服务器端运行。它是低级别并且与框架无关的,大约有6KB大小,
JSS-cssinjs高性能 JS to CSS 编译器
0