用javascript隐藏/显示CSS div - 隐藏后不再显示 -
当我做一个鼠标悬停时,div'container'被隐藏。当我在空格处再次执行鼠标悬停时,div应该是没有任何反应的,意味着它看不到。用javascript隐藏/显示CSS div - 隐藏后不再显示 -
我该怎么做?
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
function ShowUserInterface(containerToSwitch) {
debugger;
var element = document.getElementById(containerToSwitch);
if (element.getAttribute("visibility") == "hidden")
element.setAttribute("style", "visibility: visible");
else
element.setAttribute("style", "visibility: hidden");
}
</script>
<div style="visibility:visible;width:200px;height:200px;background-color:Aqua" onmouseover="ShowUserInterface(this.id)" id="container" >
<uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</asp:Content>
我很专注于一个div ...现在做显示:无/块与表,它的工作。
隐藏元素不能触发事件,那么在你的情况下,我看到的只有一个可能的解决方案:使用style.opacity = 0
和style.opacity = 1
代替style.visibility = 'hidden'
和style.visibility = 'visible'
。但这在旧版浏览器中不起作用。
此外,如果你想获得一些样式属性使用element.style.visibility
,不element.getAttribute('visibility')
:
if (element.style.visibility == "hidden")
element.style.visibility = "visible";
else
element.style.visibility = "hidden";
或者更好的使用一些JS框架(jQuery的,prototype.js中,mootools的),特别是如果你的项目需要大量的JavaScript 。
试试这个
“ 如果(element.style.visibility == ”隐藏“) element.style.visibility = ”看得见“; 否则 element.style.visibility = ”隐藏“;
“
此功能清除所有以前的风格信息,所以不是最好的做法来做一些东西。
而是使用
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
你检查的元素在visibility
属性,但它实际上是style
对象 - 但你可能甚至当你做element.style.visibility
,因为这可能并不总是给结果感到惊讶你在正确的结果(在你的情况下,它会因为你的设置内嵌样式这是不好的做法,反正)
让我们假设你设置你的CSS样式的元素,像这样:
#user { visibility: hidden; }
然后你检查它:
alert(document.getElementById('user').style.visibility);
它会包含一个空字符串""
- 而不是你最好应使用getComputedStyle
真正得到什么款式都IN USE。
不再显示div了! – msfanboy 2011-05-18 10:03:05
隐藏的元素不能触发事件,所以在你的情况下,我只看到一种可能的解决方案:使用'style.opacity = 0'和'style.opacity = 1'来代替'style.visibility ='hidden''和'style .visibility ='visible'。但这在旧版浏览器中不起作用。 – bjornd 2011-05-18 10:15:09
@bjornd你的评论是迄今为止唯一一个实际上指事件不会触发的事实。考虑发布它作为答案。 – Ronny 2011-05-18 10:25:42