This article describes the solution to the invalid style.display="" in js. Share it for your reference. The specific solution is as follows:
1. Problem description:
In js we sometimes want to dynamically control a div to display or hide or more operations, but if we style.display="" may result in no effect.
Look at the following code:
Copy the code as follows: <style>
#name
{
display:none;
}
</style>
</head>
<body>
<div id="name" >
My name is smile.
</div>
</body>
</html>
<script>
window.onload=function(){
document.getElementById('name').style.display="";
alert("test");
}
</script>
CSS defines the div with id name as hidden, and after the page is loaded, we use js to control the display of the id. Is there any error in writing this?
Is there any mistake? But why is the interface still blank?
2. Solution:
Remember there is another usage of xxx.style.display="block" Then let's try it.
Alas, it actually showed! ! !
Then let’s check the difference between style.display="" and style.display="block".
In fact, the biggest difference between these two is that block is displayed by blocks, so there will be line breaks. So since there is only such a difference, why can one be displayed in this example and the other not? Worry.
Okay, let’s go to this problem first. Let’s see how we solve it in the current problem. In addition to using style.display="block" to solve it, there is another way:
Copy the code as follows: <div id="name" style="display:none" >
My name is smile.
</div>
<script>
document.getElementById('name').style.display="";
</script>
It is to use style with id name to build into the tag, so that it can be displayed normally regardless of whether it is displayed="" or displayed="block"!
I hope that the description in this article will be helpful to everyone's web programming based on javascript.