我有一个显示设置为 none 的课程我想在 Javascript 中现在将它设置为 inline 我知道我可以使用 id 和 getElementById 来做到这一点，但是什么上课最干净的方法是什么？
【问题讨论】：
标签： javascript css
你可能想利用/重写这个函数：
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;
}
【讨论】：
您可以做到这一点 - 实际上更改与类相关的样式规则 - 使用 styleSheets 数组 (MDN link)，但坦率地说，你可能会更好（如变更日志所述）拥有定义 display: none 的单独样式，然后在您希望元素不再隐藏时从元素中删除该样式。
【讨论】：
您可以改为创建新的样式规则。
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");
【讨论】：
要更改 CLASS，您需要编辑文档样式表
[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
.style.display='inline';
[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
.style.display='inline';.box {
margin: 10px;
padding: 10px;
background: yellow;
display: none
}<div class="box" >My box 1</div>
<div class="box" >My box 2</div>
<div class="box" >My box 3</div>【讨论】：
你的意思是这样的吗？
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; }
【讨论】：
getElementsByClassName for document这样的方法
getElementsByClassName：ejohn.org/blog/getelementsbyclassname-speed-comparison
最好的方法是有一个隐藏的类，像这样：
.hidden { display: none; }
之后，JavaScript 中的每个元素都有一个className 属性。您可以操纵该字符串以删除出现的 hidden 类并添加另一个。
一条建议：使用 jQuery。让处理这类事情变得更容易，你可以这样做：
$('#element_id').removeClass('hidden').addClass('something');
【讨论】：
您可以使用getElementsByClassName，在其中您将获得一个元素数组。然而，这并没有在旧浏览器中实现。在这些情况下，getElementsByClassName 是 undefined 所以 the code has to iterate through elements and check which ones have the desired class name。
为此，您应该使用 jQuery、mootools、原型等 javascript 框架。
在 jQuery 中，它可以使用单行来完成，如下所示：
$('.theClassName').css('display', 'inline')
【讨论】：
$('.theClassName').css('display', 'inline')
虽然这已经过去很久了，但这里有几点说明：
使用display: inline 使事物再次可见可能会破坏
页面流。有些元素是内联显示的，有些是块状的，等等。这个
应该保留。因此，只定义一个 .hidden 样式并将其删除
让事物再次可见。
如何隐藏：有（至少）两种隐藏元素的方法，一种是
上面提到的display: none，它基本上使元素
表现得好像它不存在一样，visibility: hidden
使元素不可见，但保留其占用的空间。
根据您要隐藏的内容，可见性可能会更好
选择，因为其他元素在显示/隐藏时不会移动
元素。
添加/删除类与操作 CSS 规则：结果是 很不一样。如果你操纵 CSS 规则，所有元素都有 某个 CSS 类受到影响 - 现在和将来，即新的 动态添加到 DOM 的元素也被隐藏，而当 您添加/删除一个类，您必须确保新添加的元素 还添加/删除了类。所以，我会说添加/删除 类适用于静态 HTML，而操纵 CSS 规则 可能是动态创建的 DOM 元素的更好选择。
【讨论】：