解决HTML节点属性为display:none的问题

爱被打了一巴掌 2021-09-20 15:54 855阅读 0赞

写了一个简单的例子，单击按钮会调用js中的change()函数使得div的display的属性边成none，效果就是使得图片被隐藏了。源码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<title>display test</title>
    	<meta charset="utf-8">
    	<script type="text/javascript">
    		function change(){
    			document.getElementById("demo").style.display="none";
    		}
    	</script>
    </head>
    <body>
    	<h3>关于javascript修改节点属性的方法的尝试</h3>
    	<div id="demo" style="display:block">
    		<img src="1.jpg" width="100" height="100" alt="加载失败">
    	</div>
    	<button type="button" onclick="change()">点击触发函数</button>
    </body>
    </html>

单击后的效果如下：![在这里插入图片描述][20190902225444602.JPG]  
下面是显示隐藏内容，即显示display:none的节点的方法：

**1**.直接按F12（或是Fn+F12）,如下图，找到源码中display:none出，选中后去修改为display:block即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ljemZ5NTg1_size_16_color_FFFFFF_t_70]  
**2.**通过js函数来操作dom节点，也是按F12后选择Console,输入一下代码：

document.getElementById("demo").style.display="block"

其中dome是标签 `<div>`的id,回车后也能显示出隐藏的内容，我这里是隐藏了一张图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ljemZ5NTg1_size_16_color_FFFFFF_t_70 1]

[20190902225444602.JPG]: /images/20210920/f3a93f80c41141aaa031c091b1773b81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ljemZ5NTg1_size_16_color_FFFFFF_t_70]: /images/20210920/6c9f0467eb68489283db8a4a96e3d847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ljemZ5NTg1_size_16_color_FFFFFF_t_70 1]: /images/20210920/f91116288f9e48b897d5f5ccd8cd5e31.png