文档章节

display:none

SKYCOBS
 SKYCOBS
发布于 2016/04/28 09:05
字数 390
阅读 122
收藏 1

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值是没有效果的

<!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>


© 著作权归作者所有

上一篇: pl/sql连接数据库
下一篇: js 数组操作删除
SKYCOBS
粉丝 10
博文 122
码字总数 19280
作品 0
呼和浩特
程序员
私信 提问
Arduino显示模块之0.96寸OLED_I2C显示屏的使用

     OLED   使用的库文件   Adafruit SSD1306 Library:   下载地址:https://github.com/adafruit/Adafruit_SSD1306   Adafruit GFX Library:   下载地址:https://github.co...

Python与Arduino
2017/08/17
0
0
IE6/IE7下:inline-block解决方案

IE6/IE7下:inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时,所有的浏览器都支持; 2、block元素的display属性设置为...

LorinLuo
2016/03/31
75
0
Android 获取设备宽高分辨率

想要获取设备宽高分辨率,最好放到Utils跑龙套里面。 基础知识: WindowManager The interface that apps use to talk to the window manager. Use to get one of these. Each window manage......

FergusJ
2015/08/28
0
0
What does the 11 mean in INT(11)?

What does the 11 mean in INT(11)? By Jeremy Smyth-Oracle on Mar 26, 2014 If you create a table using a numeric type like INT or BIGINT, you might have been surprised by the numb......

天天顺利
2015/07/30
38
0
div横排布局兼容性

我想实现这样的效果,特别要求放在顶端。 在firefox是这样显示的,这是我想要的效果,可是在IE中却给我显示成这样子。 特别要求 要求1 要求2 要求3 要求4 请问怎么样才能做到ie跟firefox都显...

要做攻城师的志
2013/07/24
382
1

没有更多内容

加载失败,请刷新页面

加载更多

秒杀系统思路

业务分析 技术挑战 请求响应要快:无论成功失败,需要尽快返回给用户 架构设计   前端:静态化   站点层:限制请求数   服务层:乐观锁写缓存   数据库CAP:读写高可用,一致性,扩容...

雷开你的门
21分钟前
8
0
最全的教育行业大数据解决方案,个个针对痛点

大数据的悄然兴起也带动了教育行业的革新,移动教育、云课堂等的出现,使得教育行业再次成为了可以中长期保持高景气的行业。然而,初涉数据领域的教育行业同时也面临着相当大的难题,还需要更...

朕想上头条
25分钟前
7
0
预约模块设计分析

1.预约功能描述: 预约是小程序中常见的一种商品管理系统,商家可根据商品或服务的特性,灵活设置预约细节,为用户提供线上预约服务,如场地预约,商品预定等,实现高效经营。 预约场景: ...

鱼煎
28分钟前
5
0
阿里云日志服务构建网站实时分析大盘实战

场景分析 挖掘数据价值是当前企业级网站共同面临的问题。买买网是一个电商平台网站,每天拥有大量的用户访问和购买记录。为了引导用户直接消费,提升购买率和转化率,不同的用户类别需要推荐...

阿里云官方博客
29分钟前
3
0
TL665xF-EasyEVM开发板硬件处理器、NAND FLASH、RAM

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
33分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部