如何更改 javascript 中的 CSS 属性“显示”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8072873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I change the CSS property "display" in javascript
提问by Steve Adams
How do I change the CSS property display, in JavaScript, from display:noneto display:normalfor these divs?
如何display在 JavaScriptdisplay:none中display:normal为这些 div更改 CSS 属性从到？
#hide_0 { display:none }
#hide_1 { display:none }
#hide_2 { display:none }
#hide_3 { display:none }
#hide_4 { display:none }
#hide_5 { display:none }
Only one at a time. I need to display one and hide the rest.
一次只有一个。我需要显示一个并隐藏其余的。
What I used:
我用过的：
var persistent_element='hide_1';
function link_update(link_display)
{
var local_element;
local_element=document.getElementById(persistent_element);
local_element.style.display='none';
local_element=document.getElementById(link_display);
local_element.style.display='block';
persistent_element=link_display;
}
How I connected it : m4 is a minified - connects onclick to these methods
我是如何连接的：m4 是一个缩小版 - 将 onclick 连接到这些方法
m4('l1',function {return link_update(hide_1);});
m4('l2',function {return link_update(hide_2);});
m4('l3',function {return link_update(hide_3);});
m4('l4',function {return link_update(hide_4);});
m4('l5',function {return link_update(hide_5);});
m4('l6',function {return link_update(hide_6);});
回答by jfriend00
To use javascript to change the style, you can do it like this:
要使用 javascript 更改样式，您可以这样做：
// hide an element
document.getElementById("hide_0").style.display = "none";
// show a block element
document.getElementById("hide_1").style.display = "block";
// to go back to the default or CSS specified value
document.getElementById("hide_2").style.display = "";
So, if you wanted to hide all and show one, you could do that with this function:
所以，如果你想隐藏所有并显示一个，你可以用这个函数来做到这一点：
function showOneHideOthers(base, len, numToShow) {
// objects must have ids like base_0, base_1, etc...
for (var i = 0; i < len; i++) {
if (i != numToShow) {
document.getElementById(base+i).style.display = "none";
}
}
document.getElementById(base+numToShow).style.display = "block";
}
showOneHideOther("hide_", 6, 2);
P.S. normalis not a valid value for the display property. The typical values are block, noneand inlineand there are others like inline-block, table, etc....
PS normal不是显示属性的有效值。典型值是block，none和inline和有其他人一样inline-block，table等....
回答by James Allardice
Your question is not particularly clear, but the essence of what you want to do is simple. You can get a reference to a DOM element which has an idusing getElementById, and you can change the displayproperty:
你的问题不是特别清楚，但是你想做的事情的本质很简单。您可以获得对具有idusing的 DOM 元素的引用getElementById，并且您可以更改display属性：
document.getElementById("hide_0").style.display = "none"; //or "block"
However, you have several element that you want to hide/show (I'm not sure when you want to do so), so it may be easier to use a different method of selecting the elements (such as getElementsByTagName, or getElementsByClassName, but it depends on your HTML and what you're actually trying to do).
但是，您有几个要隐藏/显示的元素（我不确定何时要这样做），因此使用不同的选择元素的方法可能更容易（例如getElementsByTagName, 或getElementsByClassName，但这取决于在您的 HTML 以及您实际尝试做的事情上）。
回答by GAgnew
You can set a css property on an element using the style method.
您可以使用 style 方法在元素上设置 css 属性。
div.style.display = '';
