js操作cssRule的增删改

最新推荐文章于 2024-09-25 07:57:45 发布

原创最新推荐文章于 2024-09-25 07:57:45 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

46 篇文章

订阅专栏

css

10 篇文章

订阅专栏

本文介绍了一种方法，通过遍历样式表并查找特定关键字，然后修改匹配到的规则来动态调整元素的尺寸。这种方法适用于网页设计和前端开发中，特别是需要动态响应式布局的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

initSize: function(){
var sheet = null;
for (var i = 0, len = document.styleSheets.length; i < len; i++) {
sheet = document.styleSheets[i];
if (sheet.href.indexOf('transitions') != -1) {
var rules = sheet.rules || sheet.cssRules;//取得规则列表
//修改样式表中的样式规则
var rule = rules[0];//取得第一条
rule.style.width = options.imageWidth + "px";
rule.style.height = options.imageHeight + "px";
rule = rules[1];//取得第2条
rule.style.width = options.imageWidth + "px";
rule.style.height = options.imageHeight + 80 + "px";
//删除前面两条rules。
// deleteRule(sheet, 0);
// deleteRule(sheet, 1);
// insertRule(sheet, ".imageSize", "width:" + options.imageWidth + ";" + "height:" + options.imageHeight + ";", 0);
// insertRule(sheet, ".wrapperSize", "width:" + options.imageWidth + ";" + "height:" + options.imageHeight + 80 + ";", 1);
console.log(sheet);
break;
}
}
function insertRule(sheet, selectorText, cssText, position){
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
}
else
if (sheet.addRule) { //仅对IE有效
sheet.addRule(selectorText, cssText, position);
}
}
function deleteRule(sheet, index){
if (sheet.deleteRule) {
sheet.deleteRule(index);
}
else
if (sheet.removeRule) { //仅对IE有效
sheet.removeRule(index);
}
}
},