Shulou(Shulou.com)06/03 Report--

Editor to share with you what you need to pay attention to when using display:none in CSS, I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

Matters needing attention in using CSS display:none

The CSS display:none style is often used in the foreground coding of web pages, and it is found that there are several features that need to be paid attention to when using it.

1, if the style file or page file code to hide the element directly with CSS display:none, after loading the page, without setting the style through js to make the element display under the premise, using js code will not be able to correctly obtain some of the element's attributes, such as offSetTop,offSetLeft, etc., the value returned will be 0, through js to set style.display to make the element display before these values can be correctly obtained.

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

3. If the CSS display:none style of an element is set through a style file or css, setting style.display= "" with js does not make the element display, you can use block or inline equivalent instead. Setting directly on an element through style= "CSS 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 when style.visibility hides the element, it retains the space occupied by the element on the page, while style.display hides the element and gives up the page space.

The above is all the contents of the article "what to pay attention to when using display:none in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.