在Javascript中更改类的CSS？

Question

我有一个带有显示设置的类,none我想在Javascript中将其设置为inline我知道我可以使用id来执行此id操作,但是使用类最干净的方法是什么？

Answer 1

你可以这样做 - 实际上改变与类相关的样式规则 - 使用styleSheets数组(MDC链接,MSDN链接),但坦率地说,你可能更好(如更改日志所说)有一个单独的样式定义display: none然后删除该样式从你想要的元素不再隐藏.

Answer 2

您可以使用getElementsByClassName其中的元素数组.但是,这在旧版浏览器中未实现.在这些情况下getElementsByClassName是undefined这样的码具有通过元件进行迭代,并检查哪些具有期望的类名.

为此你应该使用javascript框架,如jQuery,mootools,prototype等.

在jQuery中,可以使用单行完成,如下所示:

$('.theClassName').css('display', 'inline')

Answer 3

你的意思是这样的吗？

var elements = document.getElementsByClassName('hidden-class');
for (var i in elements) {
  if (elements.hasOwnProperty(i)) {
    elements[i].className = 'show-class';
  }
}

然后是CSS

.hidden-class { display: none; }
.show-class { display: inline; }

Answer 4

您可以改为创建新的样式规则.

var cssStyle = document.createElement('style');
cssStyle.type = 'text/css';
var rules = document.createTextNode(".YOU_CLASS_NAME{display:hidden}");
cssStyle.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssStyle);

$("#YOUR_DOM_ID").addClass("YOUR_CLASS_NAME");

Answer 5

您可能想要利用/重写此功能:

function getStyleRule(ruleClass, property, cssFile) {
    for (var s = 0; s < document.styleSheets.length; s++) {
        var sheet = document.styleSheets[s];
        if (sheet.href.endsWith(cssFile)) {
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            if (rules == null) return null;
            for (var i = 0; i < rules.length; i++) {
                if (rules[i].selectorText == ruleClass) {
                    return rules[i].style[property];
                    //or rules[i].style["border"]="2px solid red";
                    //or rules[i].style["boxShadow"]="4px 4px 4px -2px rgba(0,0,0,0.5)";
                }
            }
        }
    }
    return null;
}

• 扫描所有样式表附加传递""作为第三个参数,否则像"index.css"
• ruleClass包含起始'.'
• if(rules [i] .selectorText && rules [i] .selectorText.split(',').indexOf(property)!== -1)条件改进在这里找到/sf/answers/1187657341/
• 不要忘记在css属性上使用javascript语法,例如box-shadow与boxShadow