如何使用 javascript 显示/隐藏跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27207854/
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 to show/hide a span using javascript
提问by user3378649
Can someone show a way to show/hide a span using javascript
有人可以展示一种使用 javascript 显示/隐藏跨度的方法吗
document.getElementById("test").style.display= 'visible';
document.getElementById("test").style.display= 'block';
In the HTML Code
在 HTML 代码中
<span id='test' ..
How can I overcome this problem. Is there any thing that I should think about?
我怎样才能克服这个问题。有什么需要我考虑的吗？
UPDATEI have a class like this one, I want to force mouse hovering on it.
更新我有一个这样的类，我想强制鼠标悬停在它上面。
<div id="test" class="tooltip effect">
<div id="second" href="#"> .. </div>
On css:
在 CSS 上：
tooltip{..}
effect{..}
effect:hover{..}
Another option I tried besides your code is
除了您的代码之外，我尝试的另一个选择是
document.getElementById("test").onmouseover = test.hover;
- Should I re-write the hover class to another name-class, or should I tweak your code?
- 我应该将悬停类重写为另一个名称类，还是应该调整您的代码？
回答by gNerb
Use display none/default:
使用显示无/默认：
document.getElementById("test").style.display= 'none';
document.getElementById("test").style.display= '';
Below are some types and some easy to remember rules about them:
以下是一些类型和一些易于记忆的规则：
Default: the elements default property (generally block or inline)
默认值：元素默认属性（通常是块或内联）
Block: Generally on a line by itself. Has the width and height attributes (among other size/positioning attributes)
块：通常单独在一条线上。具有宽度和高度属性（以及其他大小/定位属性）
inline: on the same line as other elements/text. Does not have height/width attributes
内联：与其他元素/文本在同一行。没有高度/宽度属性
Inherit: Inherits the parent element's display type
Inherit：继承父元素的显示类型
回答by Sterling Archer
visibleisn't a value for the display, you want none
visible不是显示值，你想要 none
回答by Lajos Arpad
I would do something like this to handle it:
我会做这样的事情来处理它：
function HideAndSeek(selector) {
var elements = undefined;
var displays = [];
if (!!selector.id) {
elements = [document.getElementById(selector.id)];
} else if (!!selector.class) {
elements = document.getElementsByClass(selector.class);
}
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
displays[elementIndex] = elements[elementIndex].style.display;
}
this.hide = function() {
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
elements[elementIndex].style.display = "none";
}
};
this.show = function() {
for (var elementIndex = 0; elementIndex < elements.length; elementIndex++) {
elements[elementIndex].style.display = displays[elementIndex];
}
};
}
This function can be used this way:
这个函数可以这样使用：
var hideAndSeek = new HideAndSeek({id: "test"});
and you can hide the element(s) by:
您可以通过以下方式隐藏元素：
hideAndSeek.hide();
you can show them by:
您可以通过以下方式向他们展示：
hideAndSeek.show();
