css display:none使用注意事项小结

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

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

3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题

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

赞 (0)

相关推荐

  • css display:none使用注意事项小结

    1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值. 2.使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果. 3.如果是通过样式文件或<s

  • BootStrap注意事项小结（五）表单

    BootStrap注意事项小结（五）表单

    1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group中可以获得最好的排列. <!DOCTYPE HTML> <html> <head> <link rel="stylesheet"

  • element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css&quo

  • 浅谈js和css内联外联注意事项

    浅谈js和css内联外联注意事项

    简单说:这两个问题其实是同一个问题,但是网上找了好久也找不到方法,外联的js和css文件里不能有任何HTML的标记注释,一旦有,浏览器就疯了!一去掉就好了!!! 问题:起因是网上看到一个css的表格样式,觉得挺好看,就打算放在自己的Asp.Net程序里,开始的时候我放在aspx文件里,显示正常 然后我就打算把css和js放在独立的文件里,这时候浏览器就疯掉了,显示的效果跟原先内联的时候完全不同,就好像压根没有看到我的css样式表一样,但是有部分样式又被执行了,有部分样式又被忽略了,比如表头的th

  • gradle tool升级到3.0注意事项小结

    Gradle版本升级 其实当AS升级到3.0之后,Gradle Plugin和Gradle不升级也是可以继续使用的,但很多新的特性如:Java8支持.新的依赖匹配机制.AAPT2等新功能都无法正常使用. Gradle Plugin升级到3.0.0及以上,修改project/build.gradle文件: 修改global.gradle(自定义lib管理的gradle) tools = [ gradleTools : 'com.android.tools.build:gradle:3.0.1' ]

  • vue采用EventBus实现跨组件通信及注意事项小结

    vue采用EventBus实现跨组件通信及注意事项小结

    EventBus EventBus是一种发布/订阅事件设计模式的实践. 在vue中适用于跨组件简单通信,不适应用于复杂场景多组件高频率通信,类似购物车等场景状态管理建议采用vuex. 挂载EventBus到vue.prototype 添加bus.js文件 //src/service/bus.js export default (Vue) => { const eventHub = new Vue() Vue.prototype.$bus = { /** * @param {any} event

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • mysql迁移至8.0时的注意事项(小结)

    密码模式 PDO::__construct(): The server requested authentication method unknown to the client [caching_sha2_password] mysql8 之后,默认的密码模式改为 caching_sha2_password,新的模式需要新的驱动,至少现在 pdo / navicat 还没给出,所以我们还是得切换成老的 mysql_native_password 模式. `mysql_native_passwo

  • jQuery语法总结和注意事项小结

    一.简介 1.1.概述 随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初

  • Web2.0下XHTML+CSS 设计需要注意的地方小结

    注意事项: 1.除选择DOCTYPE之外的语句必须使用小写英文字母书写.其中包括 Macromedia Dreamweaver 生成的鼠标动作,如 OnMouseOver 也必须修改成 onmouseover. 2.XHTML语法规要求所有的标识都必须有开始和结束.例如<body>和</body>.<p>和</p>等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/".例如<br>写成<br />.<

随机推荐