js style.display = "" 和style.display="none" 区别
1、实际作用不同。
js style.display是清除屏幕显示样式,使用默认值。style.display="none" ,none是指代某一个代码,将这个代码进行隐藏,并没有删除操作。
2、用法不同。
js style.display使网页代码上显示的内容彻底删除消失,不为保留任何隐藏空间。style.display="none" 是会为其保留隐藏空间,等待其他代码读取写入。
扩展资料:
网页中某个代码中的元素有{display: none;}的样式的话,标签上相对应的的图片会被该none请求加载,但是不会被none进行渲染。代码中的隐藏信息也会被代码中的元素进行读取,并占有一定的隐藏空间。
如果上一级元素有{display: none;}的样式的话,那么下一级元素在样式表中的背景图片既不会渲染也不会加载,但是标签上的图片会被加载不会被渲染。
一、意思不同
style.display = "";是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)。
style.display="none"; 中“none”是一个值,表示元素将隐藏。
二、用法
style="display:none": 使对象在网页上彻底消失,不为被隐藏的对象保留物理空间.
例子:
<html>
<head>
<title>style="visibility:hidden"与style="display:none"的区别</title>
</head>
<body>
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
<span style="display:none; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span><br/>
</body>
</html>
三、效果不同
如果元素有{display: none;}的样式的话,标签上的图片会被请求加载,但是不会被渲染,如果父元素有{display: none;}的样式的话,子元素在样式表中的背景图片既不会渲染也不会加载,但是标签上的图片会被加载不会被渲染。
style.display = "";是清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)style.display="none"; 中“none”是一个值,表示元素将隐藏。
扩展资料:
style.display其他值的意义:none 此元素不会被显示。block 此元素将显示为块级元素,此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
list-item 此元素会作为列表显示。run-in 此元素会根据上下文作为块级元素或内联元素显示。compact 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 table-column 此元素会作为一个单元格列显示(类似 <col>)。
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)。table-caption 此元素会作为一个表格标题显示(类似 <caption>)。
参考资料来源:W3School-HTML DOM display 属性
一、作用不同
1、js style.display = "":是清除display样式,display将使用默认值,块元素会变成block,内联元素会变成inline。
2、style.display="none":“none”是一个值,表示元素将隐藏。
二、使用场景不同
1、js style.display = "":元素大多是"内联"或"块"元素:一个内联元素,在其左侧和右侧都是浮动内容。一个块元素填满整个行。
2、style.display="none":允许作者显示或隐藏一个元素。与 visibility 属性类似。然而,如果您设置 display:none,将隐藏整个元素。
三、语法不同
1、js style.display = "":Object.style.display="value"元素呈现为块级元素或内联元素,取决于上下文。
2、style.display="none":document.getElementById("p1").style.display="none";元素呈现为内联表格(类似 <table>),表格前后没有换行符。
参考资料来源:百度百科-javascript
参考资料来源:百度百科-JavaScript详解
style.display="none"; 中“none”是一个值,表示元素将隐藏