Javascript 更改CSS样式表';s选择器';性质
下面是我们传统上如何更改重复元素的样式 将样式应用于每个元素Javascript 更改CSS样式表';s选择器';性质,javascript,css,class,Javascript,Css,Class,下面是我们传统上如何更改重复元素的样式 将样式应用于每个元素 function changeStyle(selector, prop, val) { var elems = document.querySelectorAll(selector); Array.prototype.forEach.call( elems, function(ele) { ele.style[prop] = val; }); } changeStyle('.myData', 'color', '
function changeStyle(selector, prop, val) {
var elems = document.querySelectorAll(selector);
Array.prototype.forEach.call( elems, function(ele) {
ele.style[prop] = val;
});
}
changeStyle('.myData', 'color', 'red');
使用类取代现有样式
function addClass(selector, newClass) {
var elems = document.querySelectorAll(selector);
for (let i=0; i<elems.length; i++) {
elems[i].classList.add(newClass);
};
}
addClass('.myData', 'redText');
函数addClass(选择器,newClass){
var elems=document.querySelectorAll(选择器);
for(设i=0;i
使用外部样式表
在页面上标识其顺序
修改规则的属性
以下是如何做到这一点:
// ssMain is the stylesheet's index based on load order. See document.styleSheets. E.g. 0=reset.css, 1=main.css.
var ssMain = 1;
var cssRules = (document.all) ? 'rules': 'cssRules';
function changeCSSStyle(selector, cssProp, cssVal) {
for (i=0, len=document.styleSheets[ssMain][cssRules].length; i<len; i++) {
if (document.styleSheets[ssMain][cssRules][i].selectorText === selector) {
document.styleSheets[ssMain][cssRules][i].style[cssProp] = cssVal;
return;
}
}
}
changeCSSStyle('.warning', 'color', 'red');
changeCSSStyle('td.special', 'fontSize', '14px');