kat*_*ura 46 html javascript css
我有一个非常简单的外部css样式表,它具有以下内容:
div.hideBox {
display:none;
}
Run Code Online (Sandbox Code Playgroud)
因此,当加载html页面时,具有该类属性"hideBox"的div将不会显示在页面上,这就是我想要的.但是当用户点击同一页面上的按钮时,我会显示/显示该框.我尝试使用onclick事件来执行此操作,但div不会显示.
例如,代码将是:
<script language="javascript">
function showmydiv() {
document.getElementById('mybox').style.display = "";
}
</script>
</head>
<body>
<div id="mybox" class="hideBox">
some output of text
</div>
<input type="button" name="ShowBox" value="Show Box" onclick="showmydiv()">
Run Code Online (Sandbox Code Playgroud)
奇怪的是,当我使用时,类似于此的设置可以工作visibility:hidden; position:absolute;,我可以使用JavaScript函数来显示<div>.
我在这做错了什么?
Mat*_*all 79
因为将div's displaystyle属性设置为""不会改变CSS规则本身的任何内容.这基本上只是创建一个"空的" 内联 CSS规则,除了清除该元素上的相同属性之外没有任何效果.
您需要将其设置为具有值的内容:
document.getElementById('mybox').style.display = "block";
Run Code Online (Sandbox Code Playgroud)
如果要替换div上的内联样式,那么您正在做的事情会起作用,如下所示:
<div id="myBox" style="display: none;"></div>
document.getElementById('mybox').style.display = "";
Run Code Online (Sandbox Code Playgroud)
Gal*_*len 13
document.getElementById('mybox').style.display = "block";
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
189651 次 |
| 最近记录: |