[英]Why can't I style tags via css when I used them on a javascript?
I am trying to style my div and button as well, using css. 我也在尝试使用CSS为div和button设置样式。 But after including a javascript code for my button wherein its function is to show and hide my div form.
但是在为我的按钮添加了JavaScript代码之后,其中的功能是显示和隐藏我的div表单。 Whatever I type on my css doesn't seem to affect the style of my div anymore.
无论我在css上键入什么内容,似乎都不会再影响div的样式。
What do I have to do? 我需要做什么?
Here is my code: 这是我的代码:
var theForm = document.getElementById('show-form').style.visibility = 'hidden'; var theButton = document.getElementById('show-button'); var thexButton = document.getElementById('hide-button'); thexButton.onclick = function() { document.getElementById('show-form').style.visibility = 'hidden'; } theButton.onclick = function() { document.getElementById('show-form').style.visibility = 'visible'; }
.hide-button { background: red; } .form-wrapper { margin: auto; width: 50%; }
<button id="show-button">Add Report</button> <div class="form-wrapper" id="show-form"> <button id="hide-button">X</button> <form action="add.php" method="post"> <label>File Name: </label> <input class="input2" type="text" required><br> <input class="submit-btn" type="submit" name="insert" value="Save"> </form> </div>
As your button has the id of hide-button but in css you select it as .hide-button so Change following code 由于您的按钮具有隐藏按钮的ID,但是在CSS中,您将其选择为.hide-button,因此请更改以下代码
.hide-button {
background: red;
}
to this 对此
#hide-button {
background: red;
}
If you mean the hide button. 如果您的意思是隐藏按钮。 You used class in the css but in the HTML you use id.
您在CSS中使用了class,但在HTML中使用了id。 So here's the fix.
所以这是解决方法。
var theForm = document.getElementById('show-form').style.visibility = 'hidden'; var theButton = document.getElementById('show-button'); var thexButton = document.getElementById('hide-button'); thexButton.onclick = function() { document.getElementById('show-form').style.visibility = 'hidden'; } theButton.onclick = function() { document.getElementById('show-form').style.visibility = 'visible'; }
#hide-button { background: red; } .form-wrapper { margin: auto; width: 50%; }
<button id="show-button">Add Report</button> <div class="form-wrapper" id="show-form"> <button id="hide-button">X</button> <form action="add.php" method="post"> <label>File Name: </label> <input class="input2" type="text" required><br> <input class="submit-btn" type="submit" name="insert" value="Save"> </form> </div>
I don't know why but I used this method and it ran. 我不知道为什么,但是我使用了这种方法并且运行了。 Maybe my system is the problem.
也许我的系统出了问题。
.form-wrapper .hide-btn {
background-color: red;
cursor: pointer;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.