MrL*_*ore 1 html javascript css
在尝试div使用Javascript 进行基本折叠时,我遇到了以下奇怪的错误; 使用此代码:
<html>
<head>
<style type="text/css">
.hidden
{
display: none;
}
</style>
<script type="text/javascript">
function toggle()
{
var element = document.getElementById('hidden1');
if(element.style.display === 'none')
{
element.style.display = 'inline';
}
else
{
element.style.display = 'none';
}
}
</script>
</head>
<body>
<a onclick="toggle()">Click me</a><br />
<div id="hidden1" class="hidden">
stuffs
</div>
</body>
</html>
我原本期望它能够正常工作:它会div开始隐藏,每次点击它都会从可见变为不可见,但它不会:它需要2次点击才能第一次显示元素,经过一些调试我意识到这div似乎是在一些奇怪的量子通量.将以下警报添加到toggle()方法顶部时:
alert('\'' + document.getElementById('hidden1').style.display + '\'');
我给了'',这意味着它是空的.但是,当我在完全相同的地方这样做时:
console.log(document.getElementById('hidden1').style);
然后控制台显示:
[object CSS2Properties]
具有以下属性:
0: "display"
...
display: "none"
但是,当CSS声明.hidden内联移动到div's'时style,代码的工作方式完全符合预期.有谁知道为什么会这样？
我也想知道是否有人无法重现这个问题,因为我已经在Centos和Windows上使用apache,以及使用Firefox 24,Chrome 30和最新的Opera浏览器体验过它.
那是CSS中的C(级联).您正在检查该元素是否直接将display属性设置为none.加载页面时,它不会.当你第一次点击它时,它会检查它是否是自己的style.display none,但它是undefined; 所以它"none"根据你的if/else 分配.
现在,当您再次单击它时,它确实已style.display设置为"none",因此它将其更改为"inline".元素仍然具有.hidden设置的类display: none,但由于CSS继承属性的方式,元素的设置更有价值.
有两种方法可以解决您的问题.您可以像这样添加display none inline
<div id="hidden1" style="display:none">
或者你可以让你的if else检查一个未定义的值,它就像这样等于'none'
// In function toggle()
if(!element.style.display || element.style.display === 'none')
首先检查空字符串或未定义的值,并检查它是否设置为none.
你实际上可以做到这两点,但如果可能的话,最好不要使用内联样式.
| 归档时间： |
|
| 查看次数： |
1004 次 |
| 最近记录： |