当前位置:首页 > 英文周记 > 正文内容

visibility属性的简单介绍

更新时间:2026-07-18 00:57:56 周记网3年前 (2023-03-20)英文周记104

jquery如何设置visibility属性?

原因是设置了visibility为hidden,但is(“:visible”)仍然返回为true。

所以if里面检测css的visibility属性就可以了

if($("#zj").css("visibility")!="hidden"){

visibility属性的简单介绍

$("#zj").css("visibility","hidden");

}else{

$("#zj").css("visibility","visible");

};

visibility: hidden和display: none 有什么不同?

visibility: hidden和display: none 在作用、对HTML元素的影响、定义上有所不同:

1、作用不同

visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着。

display: none----将元素的显示设为无,即在网页中不占任何的位置。

2、使用后HTML元素有所不同

visibility:hidden,使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。

display:none,使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。

3、定义不同

visibility 属性指定一个元素是否是可见的。

display这个属性用于定义建立布局时元素生成的显示框类型。

参考资料:百度百科 display

百度百科 visibility

什么属性用来设置数据的显示方式

本质:让一个元素在页面中隐藏或者显示出来。

1.display 属性

display 属性用于设置一个元素应如何显示。

display: none;隐藏对象

display:block;除了转换为块级元素之外,同时还有显示元素的意思

display 隐藏元素后,不再占有原来的位置。

后面应用及其广泛,搭配JS 可以做很多的网页特效。

2. visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility:visible ;元素可视

visibility:hidden; 元素隐藏

visibility 隐藏元素后,继续占有原来的位置。

如果隐藏元素想要原来位置,就用visibility:hidden

如果隐藏元素不想要原来位置,就用display:none (用处更多重点)

3.overflow 溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。

visible:不隐藏内容也不添加滚动条

hidden:不显示超过对象尺寸的内容,超出的部分隐藏掉

scroll:不管是否超出内容,总是显示滚动条

auto:超出自动显示滚动条,不超出不显示滚动条

一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。

但是如果有定位的盒子,请慎用overflow:hidden 因为它会隐藏多余的部分。

打开CSDN,阅读体验更佳

CSS元素的显示与隐藏 :display 属性, visibility 属性, overflow 溢出

元素的显示与隐藏 类似网站的广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现。 本质:让一个元素在页面中隐藏或者显示出来。 display 显示隐藏 visibility 显示隐藏 overflow 溢出显示隐藏 display 属性 display 属性用于设置一个元素应如何显示。 display:none ;隐藏对象 display:block ;除了转换为块级元素之外,同时还有显示元素的意思。 display 隐藏元素后,不再占有原来的位置。 后面应用及其广泛,搭配JS可以做很多的

继续访问

css元素的显示与隐藏 display显示隐藏 +visibility显示隐藏 +overflow溢出显示隐藏

css元素的显示与隐藏display显示隐藏元素visibility显示隐藏元素overflow溢出显示隐藏 display显示隐藏元素 display 设置或检索对象是否及如何显示。 display: none 隐藏对象 display:block 除了转换为块级元素之外,同时还有显示元素的意思。 特点: display 隐藏元素后,不再占有原来的位置。 visibility显示隐藏元素 visibility 属性用于指定一个元素应可见还是隐藏。 visibility:visible ;  元素可视

继续访问

最新发布 css overflow溢出显示隐藏

将 overflow: hidden;改为overflow: scroll;将overflow: scroll;改为 overflow: scroll;有定位的盒子慎用overflow: hidden;/* 超出的时候显示滚动条,不超出不显示 */将默认改为 overflow: hidden;运行结果:溢出的部分显示滚动条 不溢出也显示。默认是:overflow: visible;运行结果:超出的时候显示滚动条,不超出不显示。溢出的部分显示滚动条 不溢出也显示*/运行结果:隐藏了溢出的部分。

继续访问

overflow实现信息的显示和隐藏

我没想到,居然真的是这么做的.那天就是随便尝试了下,今天闲下来看了下淘宝网生成的页面代码,果然也是类似的作法.嘎嘎~ 利用overflow实现显示全部信息和隐藏部分信息. 不过偶写的很粗糙,还没利用overflowX,overflowY这两个样式. ul id="cata_list" style="overflow:hidden;" % int len=listC...

继续访问

safari filter: drop-shadow 设置的变色图像无法显示问题

safari filter: drop-shadow 不显示

继续访问

CSS 如何实现文字溢出隐藏时,隐藏左边或者右边,并显示省略号

CSS 如何实现文字溢出隐藏时,隐藏左边或者右边,并显示省略号 指定一个定宽高的盒子,当文字溢出,会换行显示出来。 .box { width: 60px; height: 30px; background-color: #ff000020; } 当限制文字不换行后,会在一行超出显示出来。 .box { width: 168px; height: 30px; background-color: #ff000020; white-space: nowrap; } 添加溢出隐藏,则会自动隐藏

继续访问

元素的显示与隐藏

元素的显示与隐藏

继续访问

用CSS实现元素的显示与隐藏(简单介绍display,visibility和overflow)

用CSS实现元素的显示与隐藏前言一级目录二级目录三级目录一级目录二级目录三级目录一级目录二级目录三级目录 前言 将元素的显示和隐藏,他们的主要目的是让一个元素在页面中消失,但是不并非是将该元素删除,虽然在界面中是看不见它的,但实际上它还存在与文档源代码里面。俗称消失了,但也没完全消失。 一级目录 二级目录 三级目录 一级目录 二级目录 三级目录 一级目录 二级目录 三级目录 ...

继续访问

CSS 深入理解:overflow: hidden——隐藏溢出、清除浮动、解除坍塌

overflow:hidden 的主要功能有三个: 隐藏溢出 清除浮动 解除坍塌 举例理解 初始html内容: !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Co

继续访问

css vissibility显示隐藏元素

隐藏元素后,继续占有原来的位置。隐藏元素后,继续占有原来的位置。隐藏元素后,不占有不占有原先的位置。visibility属性用于指定一个元素应该可见还是隐藏。把visibility: hidden;

继续访问

元素的显示visibility/display

visibility visibility 属性虽然会隐藏元素,但会保留元素在页面中所占的空间。 值 描述 visible 默认值,表示元素是可见的 hidden 隐藏元素 collapse 主要用来隐藏表格的行和列,隐藏的行或列所占的空间可以被其他表格内容使用;如果在其他元素上使用,其效果等同于“hidden” inherit 从父元素继承 visibility 属性的值 display 通过 display 属性可以设置元素是否显示以及如何显示。

继续访问

display的用法

display这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的,要了解display之前,来了解一些块级元素和内联元素。 1、块级元素 ①总是在新行上开始(块元素独占一行); ...

继续访问

CSS的display、visibility、overflow:hidden属性关于显示与隐藏的占位问题

CSS的display、visibility、overflow:hidden属性关于显示与隐藏的占位问题

继续访问

css overflow: hidden——隐藏溢出、清除浮动、解决坍塌问题

overflow:hidden 的主要功能有三个 隐藏溢出 清除浮动 解除坍塌 举例理解 1.初始html内容: !DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-C

继续访问

display none 隐藏后怎么显示_display:none与visibility:hidden的区别?

“因为平时总是觉得自己不停的修改bug,好记性不如烂笔头,所以把自己每天遇到问题记录下来。”要想知道两者的区别,就要知道他们代表的是什么意思,其实两者都是对内容进行隐藏的的声明;两者都会在页面中消失,都不可被选中,但display:none是不会占用时间尺寸的,而visibility:hidden在页面这是会占用尺寸的。可以实现对内容进行隐藏的CSS声明:1、display:none ...

继续访问

关于visibility和display的区别

文章摘自: display:(可能的值)none 此元素不会被显示。block 此元素将显示为块级元素,此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素,元素前后没有换行符。inline-block 行内块元素。(CSS2.1 新增的值)list-ite...

继续访问

html 溢出的部分自动隐藏,css overflow溢出隐藏(文字溢出时的自动隐藏处理)

overflow 属性说明:版本:CSS2  兼容性:IE4+ NS6+ 继承性:无语法:overflow : visible | auto | hidden | scroll相关参数说明如下:visible::不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。auto:此为body对象和textrea的默认值。在需...

继续访问

关于前端隐藏元素的问题

1.visibility(不会自适应) 可选值: visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 inherit 规定应该从父元素继承 visibility 属性的值。 2.hidden(会...

继续访问

CSS显示和隐藏元素「display」「visibility」

CSS显示和隐藏元素「display」「visibility」

css中visibility和visible的区别是什么

CSS中的visibility和display两个属性很容易被混淆,因为它们看起来是做同样的事情,但实际上,这两个属性是完全不同的。

visibility属性用来设置一个给定的元素是否显示(visibility="visible|hidden"),但是,虽然一个元素的visibility被设置为hidden,但是该元素仍然会占据设计的位置:

script

language="JavaScript"

function

toggleVisibility(me){

if

(me.style.visibility=="hidden"){

me.style.visibility="visible";

}

else

{

me.style.visibility="hidden";

}

}

/scriptdiv

onclick="toggleVisibility(this)"

style="position:relative"

This

example

displays

text

that

toggles

between

a

visibility

of

'visible'

and

'hidden'.

Note

the

behavior

of

the

next

line./divdivThis

second

line

shouldn't

move,

since

visibility

retains

its

position

in

the

flow/div

script

language="JavaScript"

function

toggleVisibility(me){

if

(me.style.visibility=="hidden"){

me.style.visibility="visible";

}

else{

me.style.visibility="hidden";

}

}

/script

div

onclick="toggleVisibility(this)"

style="position:relative"

This

example

displays

text

that

toggles

between

a

visibility

of

'visible'

and

'hidden'.

Note

the

behavior

of

the

next

line./divdivThis

second

line

shouldn't

move,

since

visibility

retains

its

position

in

the

flow/div

注意如果display属性没有被明确设置,将默认被设置为该类元素的常用值。

明显地,两个属性中display属性更有用,多数情况下在隐藏文字的时候要将相关的元素做相应的调节(例如树结构)。

javascript中 visibility和display的区别

区别:

1、占用域的空间不同。

visibility要占用域的空间,而display则不占用。

visibility和display都可以实现对页的隐藏,例如:

将元素display属性设为 block,会在该元素后换行。

将元素display属性设为 inline,会消除元素换行。

将元素display属性设为 none,隐藏该元素内容,且不占用域的空间。

将元素visibility属性设为 hidden,隐藏该元素内容,但占用域的空间。

将元素visibility属性设为 visible,显示元素内容。

2、回应正常文档流的不同。

如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility:hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display:none 。

在现实中我发现人们更多的倾向于使用display 属性(相信这也是大多数人的习惯)。当你决定用display:none 来隐藏一个元素时,你必须知道其它内容将填充到该元素留下的空白位置,从而改变页面的布局。

扩展资料

在SEO中有时我们会通过把堆砌的关键词隐藏而达到作弊的目的,但不应该使用visibility:hidden 和display:none ,而应该把关键词颜色设为和背景色相同,或者把关键词的字号设为非常小,而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为visibility:hidden 和display:none 的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的。

搜索引擎也理解这一做法(事实上搜索引擎往往忽略CSS),因此如果你的目的不是欺骗搜索引擎,你大可以放心地使用visibility:hidden 和display:none 去隐藏内容。

参考资料:百度百科-Visibility

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。