display:none
2016-04-28 00:00
169 查看
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隐藏元素且让出所占页面空间。
5.当input 设为display:none时,jq 对其操作设置其value值是没有效果的
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隐藏元素且让出所占页面空间。
5.当input 设为display:none时,jq 对其操作设置其value值是没有效果的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <script type="text/javascript" src="./js/jquery-1.12.1.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.css"> <script type="text/javascript" src="./js/bootstrap.js"></script> <script> $(function(){ $("body").click(function(event) { /* Act on the event */ $("#cs").val("text") }); }) </script> <title>Document</title> </head> <body style="height:100px"> <input type="text" id="cs" style="display:none" value="123"> </body> </html>
相关文章推荐
- git分支使用小结
- 新版mysql(mysql-5.7.12-winx64)安装
- UVa 151 - Power Crisis
- Velocity 入门
- css div float属性
- Win7 qt-windows-x86-msvc2015-5.6.0 DLL依赖库打包
- 网络--七层协议
- Spring之Bean的作用域
- XML
- P问题、NP问题、NPC问题、NP难问题
- Codeforces 665B - Shopping
- python颜色及背景
- [CODEVS1378]选课(树形dp)
- python基础学习03(循环)
- 教你HTML5与iOS交互实现各种排序动画演示
- Leetcode #57. Insert Interval 间隔插入 解题报告
- 第一阶段冲刺个人博客10
- Oracle -常用命令
- [todo]scala之spray
- python基础学习02(if...else...elif)