Home >Web Front-end >JS Tutorial >The difference between visibility and display in JAVASCRIPT style_javascript skills
The difference between visibility and display in JAVASCRIPT style_javascript skills
- WBOYOriginal
- 2016-05-16 18:36:051670browse
When visibility is set to "hidden", although the element is hidden, it still occupies its original position.
-------------------------------------------------- ----------------
Example:
Copy code The code is as follows:
< ;div onclick="toggleVisibility(this)" style="position:relative">The first line of text will trigger the "hidden" and "visible" attributes. Pay attention to the changes in the second line.
Because visibility will retain the position of the element, so although the first line is invisible, the position is still there, and the content of the second line will not move up or down.
Explanation: Note that when an element is hidden, it can no longer receive other events, so in the first piece of code, when it is set to "hidden" , it can no longer receive response events, so it cannot be displayed by clicking the first text with the mouse.
-------------------------------------------------- ----------------
On the other hand, the display attribute is a little different. The visibility attribute hides the element but maintains its floating position, while display actually sets the floating characteristics of the element.
When display is set to block, all elements in the container will be treated as a single block, just like the
element, which will be placed on the page at that point. (You can actually set the display:block of so that it works like a
.
Setting the display to inline will make it behave like the element is inline --- even if it is a normal Block elements such as
Setting the display to inline will make it behave like the element is inline --- even if it is a normal Block elements such as
will also be combined into an output stream like
----------------------. ----------------------------------------
Example:
---------------------------------- --------------------------------
Finally, display is set to: none. At this time, the element actually changes from is removed from the page, the elements below it will be automatically filled in. (At this time, the element with display: none; is equivalent to disappearing, while visibility: hidden; only means hidden, but the position is still there.)
------------------ ---------------------------------------------
display attribute Debugging examples for block, inline, none values and using visibility: hidden;:
"Too difficult":
At the same time, for the difference between display:inline; and float:left;, you can refer to this article:
(display refers to the display state, inline means inline, characteristics It is close to the previous inline element. Usually the default inline elements are span, a, em, strong, etc. Float means floating, and float: left is a floating form for block-level elements, which are different forms. Two states) http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html
float &inline</ title> <br><style> <br>*{text-align:center;padding:4px;} <br>div,p{text-align:left;} <br>span{/*float:right; */ background:#f5f5f5;border-left:1px #eee solid;border-top:1px #eee solid;border-right:1px #ccc solid;border-bottom:1px #ccc solid;} <br>ul#inline li{ display:inline; list-style:none;border-left:1px #ccc solid;width:300px; background:#f5f5f5;/* float:left*/;} <br>ul#float li{ float:left ;display:inline; list-style:none;border-left:1px #666 solid;width:300px; background:#f5f5f5; } <br></style> <br></head> <br>< ;body> <br><span style="width:300px;">span is an inline/inline element, and assigning a width to it has no effect. </span> <br><span style="width:100px; float:right;">span is an inline/inline element, assign a width of 100px float:right; you can see that it has a width. </span> <br><div> <br><p>This li is defined as inline/inline, and setting the width has no effect</p> <br><ul id="inline"> ; <BR><li>test</li> <br><li>test</li> <br></ul> <br></div> <br><div> <br><p>This li is defined as inline/inline float:left, setting the width has an effect</p> <br><ul id="float"> <br><li>test</ li> <br><li>test</li> <br></ul> <br></div> <br></body> <br></html> <br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Detailed explanation of the use of JQuery.uploadify upload file plug-in for ASP.NET_jquery" href="https://m.php.cn/faq/22735.html">Detailed explanation of the use of JQuery.uploadify upload file plug-in for ASP.NET_jquery</a></span><span>Next article：<a class="dBlack" title="Detailed explanation of the use of JQuery.uploadify upload file plug-in for ASP.NET_jquery" href="https://m.php.cn/faq/22737.html">Detailed explanation of the use of JQuery.uploadify upload file plug-in for ASP.NET_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
----------------------. ----------------------------------------
Example:
Copy code The code is as follows:
onblue text Click to see the effect.
---------------------------------- --------------------------------
Finally, display is set to: none. At this time, the element actually changes from is removed from the page, the elements below it will be automatically filled in. (At this time, the element with display: none; is equivalent to disappearing, while visibility: hidden; only means hidden, but the position is still there.)
------------------ ---------------------------------------------
display attribute Debugging examples for block, inline, none values and using visibility: hidden;:
Copy code The code is as follows:
The display attributes are block, inline, none values and debugging using visibility: hidden;
This is a SPAN in a sentence.
< input type=button value="None" onclick="oSpan.style.display='none'">
- Setting an element to inline will eliminate element wrapping.
- Set the element to none to hide the content of the element.
"Too difficult":
At the same time, for the difference between display:inline; and float:left;, you can refer to this article:
(display refers to the display state, inline means inline, characteristics It is close to the previous inline element. Usually the default inline elements are span, a, em, strong, etc. Float means floating, and float: left is a floating form for block-level elements, which are different forms. Two states) http://www.andymao.com/andy/post/42.html
http://bbs.blueidea.com/thread-2596793-1-1.html
Copy code The code is as follows: