Sharing notes on the use of display:none in css

The display:none style is often used when coding the frontend of web pages. During daily use, we find that there are several features that need to be noted.

1. If you use display:none directly for elements in the style file or page file code After hiding, after loading the page, without setting the style through js to display the element, using js code will not be able to correctly obtain some attributes of the element, such as offSetTop, offSetLeft, etc., and the returned value will be 0. Through js These values ​​can be obtained correctly after setting style.display so that the element is displayed.

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.

The above is the detailed content of Sharing notes on the use of display:none in css. For more information, please follow other related articles on the PHP Chinese website!