关于元素的隐藏

又是好久没写博客了。每每想写篇博客,却发现比我写得好的多不胜数。

当然,写博客的初心不会为了攀比和炫耀,但看到别人写得如此甚好,我只能自惭形秽了。

于是选择了摘抄在自己的笔记里(oneNote中),在此也向那些写博客的人表达敬意。因为你们,我收获了很多。

因为你们,很多次遇到难题,我迎面而解。也感激那些无私帮助我的人。

还是就此步入正题好了,我怕偏题太远。

关于元素的隐藏:

1.display:none;  ----不占空间

2.visibility:hidden; ----占空间,无法点击

2.1

position: absolute;

visibility: hidden;

---- 不占空间

3.  opacity: 0;

-moz-opacity: 0;  /* Moz + FF */

filter: alpha(opacity=0); /* IE*/

-----占空间,可点击(存在性能问题)

4.  height:0;

overflow:hidden;

----不占空间(只能用于块元素,因为行内元素设置高无效)

5.  font-size:0

----不占空间 (某些浏览器不支持,存在兼容问题)

6. text-indent: 9999px; -----设一个很大值

height: 20px;

overflow: hidden;

-----占空间,可点击(只能用于块元素,因为text-indent只用于块元素首行)

text-indent 可设一个很大的正值或者负值 视情况而定

7. line-heihgt:500px;  -----设一个很大的值

height:50px;

overflow:hidden;

-----占空间,可点击(只能用于块元素)

8.   position: relative;

top: -99999em;

-----占空间,可点击

9.  position: absolute;

top: -99999em;

----不占空间

10.  zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

-----不占空间(IE下好使,谷歌下内联元素不正常)

11.如果支持的话,字体与背景颜色一致 也可伪隐藏效果

css总是那么的神奇。。。

关于元素的隐藏,布布扣,bubuko.com

时间: 2024-08-15 01:23:48

关于元素的隐藏的相关文章

控制html元素的隐藏问题

今天,参加了京东的面试,面试官提到了一个关于css控制html元素隐藏的问题,面试的具体情况这里就不提了,现在只对元素的隐藏相关做一个小结(如有不当的地方,还望指正). 控制元素隐藏的方式,有display:none.visibility:hidden以及overflow:hidden.(面试时我还提到了将height|width设为0的情况) 一.display:none 被隐藏的元素,在页面中不占位,空出的位置会被相邻的元素占用. <div id="div0" style=&

元素显示隐藏的9种思路

× 目录 [1]display [2]visibility [3]hidden[4]opacity[5]overflow[6]clip[7]transform[8]覆盖[9]偏移 前面的话 在网页制作中,元素的显示隐藏是非常常见的需求.本文将介绍元素显示隐藏的9种思路 思路一: display 对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline.inline-b

元素的隐藏和显示

<!doctype html> <html> <head><title>元素的隐藏和显示</title></head> <style type="text/css"> .hid{ display:none;} </style> <body> <div class="hid">div块一</div> <div>div块二<

细说HTML元素的隐藏和显示

CSS文档对HTML的显示和隐藏有2个属性可供选择: 1.display 2.visiblity 这2个有什么区别呢? display: display版本:CSS1/CSS2 兼容性:IE4+ NS4+ 继承性:有 语法: display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-colum

jquery判断元素是否隐藏的多种方法

第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test">< p>仅仅是测试所用</p>< /div> 那么,我们可以用以下语句来判断id

判断jQuery元素是否隐藏

第一种:使用CSS属性 复制代码 代码如下: var display =$('#id').css('display'); if(display == 'none'){    alert("被你发现了,我是隐藏的啦!"); } 第二种:使用jquery内置选择器 假设我们页面有这么个标签, 复制代码 代码如下: <div id="test">< p>仅仅是测试所用</p>< /div> 那么,我们可以用以下语句来判断id

jquery控制元素的隐藏和显示的几种方法。

组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide()表示为display:none; 2.$("#id").toggle()切换元素的可见状态.如果元素是可见的,切换为隐藏的:如果元素是隐藏的,则切换为可见的. 3.$("#id").css('display','none');//隐藏 $(

Jquery not选择器实现元素显示隐藏

初初认识jQuery的not选择器,想要实现的功能是,点击第一个div,显示第二个div,点击第一个div以外的地方,隐藏第二个div. 具体代码如下: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(

Js - 判断元素是否隐藏、显示

判断元素是否隐藏.显示的方法,需要的朋友可以参考下 : 1.通过判断元素display属性状态值来实现 console.log($('div').css("display"));       // inlineif($('div').css("display") != 'none') { console.log('aaaaa');       // aaaaa $('div').hide();         console.log($('div').css(&qu