Summary of precautions for using css display:none_Experience exchange

1. If you directly use display:none to hide an element in the style file or page file code, after loading the page, without setting the style through js to display the element, the js code will not be able to correctly obtain the element. Some attributes, such as offSetTop, offSetLeft, etc., will return a value of 0. These values ​​can be obtained correctly only after setting style.display in js to display the element.

2. Elements hidden using display:none will not be retrieved by search sites such as Baidu, which will affect the SEO of the website. In some cases, left:-100000px can be used to achieve the same effect.

3. If you set the display:none style of an element through a style file or , setting style.display="" with js will not make the element display. You can use block Or inline equivalent value instead. Settings directly on the element through style="display:none" will not have this problem

4. In some cases, style.visibility can be used instead of style.display, but it should be noted that style.visibility When hiding an element, the space occupied by the element on the page is retained, while style.display hides the element and gives up the space it occupies on the page.