css隐藏状态,CSS元素隐藏和显示

动态的隐藏和显示：

// 隐藏元素

document.getElementById("div").style.visibility = "hidden";

// 显示元素

document.getElementById("div").style.visibility = "visible";

// 从页面中移除这个元素，当然元素的位置也被移除。

document.getElementById("div").style.display = "none";

// 此元素不会占据一行，和其它的元素一起组合显示。

document.getElementById("div").style.display = "inline";

// 此元素占据一行，单独显示

document.getElementById("div").style.display = "block";

$("div").css('display','none');

$("div").css('display','block');

$("div")[0].style.display = 'none';

$("div")[0].style.display = 'block';

// 表示display:block;

$("div").show();

// 表示display:none;

$("div").hide();

// 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$("div").toggle();

元素的隐藏CSS：

{ display: none; /* 不占据空间，无法点击 */ }

{ visibility: hidden; /* 占据空间，无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }

{

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */

}

{

position: absolute;

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* 不占据空间，无法点击 */

}

css隐藏状态,CSS元素隐藏和显示相关推荐

CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
javascript实现某元素显示隐藏带动其他元素隐藏显示
项目场景: 提示:前几天运营想要实现一个效果,当滚动轮滑过某个视口时,当该视口不可时,悬浮框显示,当该视口上滑可见时,悬浮框可见.可以看到上方底色的背景显示时,右下角黑色悬浮框隐藏,上方背景隐藏时,下 ...
html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
CSS的clip实现元素的逐渐显示和消失
前言:只想说一句,CSS的功能太强大了!!! 一. clip属性的用法 clip属性的值指定了元素的剪切区域,目前它的剪切区域只能是矩形的. 语法:clip: rect(top right botto ...
css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隐藏元素(display,visibility)的区别 display display属性值 display 属性规定元素应该生成的框的类型. 属性值: block: /表现为一个块级元素(一般 ...
html行内元素隐藏,使用v-show v-if 设置元素显示和隐藏
一丶一般情况我们可以设置元素的display属性来控制元素显示和隐藏 display: none; //元素不会显示 display: block; //显示为块级元素,元素后面带有换行符 dis ...
css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态
需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...
jquery 控制CSS属性display 实现元素的显示、隐藏
前言略. 隐藏元素 $("#id").hide() 等效的写法: $("#id").css('display','none'); 等效的CSS: displa ...

css隐藏状态,CSS元素隐藏和显示

css隐藏状态,CSS元素隐藏和显示相关推荐

最新文章

热门文章