| Article Introduction: The values for both Display:none and Visibility:hidden are hidden, but they are somewhat different. |
Display:noneAnd
Visibility:hiddenThe values for these two properties are hidden, but they are somewhat different.
Display:none:
1, if in the style file or the page file code directly with Display:none to the elements of the hidden, load the page, in no way through JS set the element to display the premise, the use of JS code will not be able to get the elements of the correct attributes, such as offsettop, Offsetleft, and so on, the return value will be 0, through the JS set Style.display to make the element display to get these values correctly.
2, the use of display:none hidden elements will not be Baidu search site retrieval, will affect the site's SEO, in some cases can use left:-100000px to achieve the same effect.
3, if it is through the style file or <style>css</style> way to set the elements of the Display:none style, with JS set style.display= "" and can not make the element display, You can use block or inline equivalents instead. Pass
style= "Display:none"Settings that are made directly on the element do not have this problem
4, In some cases, you can use style.visibility instead of style.display, but note that style.visibility hides the elements while preserving the space the elements occupy on the page, Style.display hiding the elements and giving up the space for the page.
Visibility:hidden:
If you want a piece of code to not appear in the foreground, the easiest way is to use CSS
Display:none, so that the bottom of the content will automatically fill the gap. But in some special cases, we only need to hide this element, but its position cannot be occupied, then Visibility:hidden can achieve this requirement.
In other words, use, use
Visibility:hidden;It is convenient to realize the display of hidden elements in the foreground, but its position will not be preempted by the elements behind it.
