css display：none使用注意事项小结（css动画过渡属性）这都可以

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

这篇文章主要介绍了在HTML和CSS中使用`display:none`属性时遇到的一些问题以及解决方案。文章指出，使用`display:none`隐藏的元素在JavaScript中无法正确获取其`offsetTop`、`offsetLeft`等属性的值，且不会被搜索引擎（如百度）检索，影响SEO。文章还介绍了如何通过设置`left:-100000px`等值来模拟`display:none`的效果。此外，文章提到通过样式文件设置`display:none`时，JavaScript无法显示元素，需使用`block`或`inline`等值，或直接使用`display:none`来解决问题。文章还强调了`style.visibility`与`display`属性的区别，指出`visible`隐藏元素后仍保留其页面空间，而`display:none`则会完全隐藏元素并移除所占空间。文章末尾还提到，某些情况下可以使用JavaScript的`document.body.appendChild()`方法来实现动态元素的显示或隐藏。如果您需要进一步了解如何解决在JavaScript中无法获取隐藏元素的属性值的问题，可以参考相关文章或示例代码。

1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值。

2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。

3、如果是通过样式文件或

方式来设置元素的display:none样式，用js设置style.display=””并不能使元素显示，可以使用block或inline等值来代替。通过style=”display:none”直接在元素上进行的设置不会有这个问题

4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。

您可能感兴趣的文章:实例详解display:none与visible:hidden的区别javascript获取隐藏元素(display:none)的高度和宽度的方法jquery控制display属性为none或blockjquery如何实现点击空白处隐藏元素Jquery显示、隐藏元素以及添加删除样式使用display:none时隐藏DOM元素无法获取实际宽高的解决方法