开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

JQUERY CSS "display“"block”不起作用，即使"display“"none”起作用...

问题描述：在使用jQuery和CSS时，设置元素的display属性为"block"，但是元素仍然不显示，即使将display属性设置为"none"，元素也不隐藏。

解决方案：

检查CSS选择器：确保你选择的元素是正确的。可以使用浏览器的开发者工具检查元素的选择器是否正确，并且确保没有其他CSS规则覆盖了你的设置。
检查CSS样式优先级：如果有多个CSS规则应用于同一个元素，可能会导致display属性不起作用。可以使用!important关键字来提高优先级，或者检查其他CSS规则是否覆盖了你的设置。
检查JavaScript代码：如果你使用了jQuery或其他JavaScript库来操作元素的display属性，确保没有其他代码修改了该属性。可以使用浏览器的开发者工具来检查元素的属性是否被修改。
检查元素的父元素：如果父元素的display属性设置为"none"，则子元素无论如何设置display属性都不会显示。确保父元素的display属性允许子元素显示。
检查元素的尺寸：如果元素的宽度或高度为0，即使设置了display属性为"block"，元素也不会显示。可以使用浏览器的开发者工具检查元素的尺寸是否正确。
检查浏览器兼容性：某些浏览器可能对display属性的解析存在差异。可以查阅浏览器的兼容性文档，确保你的代码在目标浏览器上正常工作。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云服务器（CVM）：提供弹性计算能力，满足各种规模的业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云云函数（SCF）：无服务器计算服务，帮助开发者更轻松地构建和管理应用程序。详情请参考：https://cloud.tencent.com/product/scf
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于各种数据存储需求。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关搜索:"document.getElementById(div).style.display = none“不起作用 (jQuery或JS)在display=none时显示 .hide()或display:none？jQuery的 CSS - display:(inline | block)和display:box之间的区别？CSS :什么时候使用display flex和display inline-block？display:block to display:none和back使嵌入的SVG元素消失，除非托管在本地 display:none在IE7中不起作用 display_errors不起作用 if($(var).css('display')=="block")with slideToggle？jQuery slideToggle不工作，使用display: none

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

「css基础」如何理解Display的属性：None，Block，Inline，Inline-Block

开篇本篇文章，笔者将介绍display的基本属性，主要涉及以下内容： display: none vs visibility: hidden display: block display: inline...display: inline-block （文末送最新CSS3英文电子书）本篇文章阅读时间预计2分钟。...01 display: none vs visibility: hidden 如下段代码所示，我们有三个红、蓝、绿的方块： css部分 #box-1 { width: 100px; height...> 首先我们先使用 display: none 属性隐藏蓝色的方块，如下段代码所示： #box-2 { display: none; width...，每个红色方块会独占一行，如下图所示： inline 按需占用空间不断行，并排显示 width,height, top-bottom margin 等属性不起作用 可以是其它行内元素的父级。

1.4K2 0

CSS布局-display属性 block 和 inblock

. ## 简介 display属性是控制网页布局非常重要的css属性。 display属性规定如何显示元素，每个html的元素都有一个默认的display值，一般为block或inline。...**块级元素（block element）** 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。...通过将 **display** 属性设置为 **none** 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中。...``` 比如、、 ``` **Display: none** **display: none;** 通常与 JavaScript 一起使用，以隐藏和显示元素， {visibility...**覆盖默认的 Display 值** 如前所述，每个元素都有一个默认 display 值。但是，您可以覆盖它。

8512 0

CSS中display:inline和display:inline-block的区别

2）不能设置宽高 3）允许其它元素在其左右 4）在这儿查看其它非常重要的旁注 block元素 1）inline元素能设置和不能设置的属性，block都能设置 2）在block元素后强制换行 inline-block...元素 1）允许其它元素在其左右 2）可以设置margin-top,padding-top,padding-bottom,margin-bottom 3）可以设置宽高 display:block, display...:inline, display:inline-block外观（如下图） ?

1.3K2 0

cssjshtml css之display:inline-block布局

1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行...两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。...没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。... b.相同之处：能在某程度上达到一样的效果　　我们先来看看这两种布局：图一：display：inline-block ?...　　对于块级元素：需添加{display:inline;zoom:1;} 4.总结: 　　display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的

1.1K2 0

CSS魔法堂：display:none与visibility:hidden的恩怨情仇

3.父元素为display:none，子孙元素也难逃一劫 .hidden{ display: none; } .visible{ display: block; } *** START... *** END *** 浏览器直接显示为 *** START *** *** END *** 4.无法获取焦点本来无一盒，何处惹焦点呢^_^即使通过tab键也是没办法的...> 7.CSS中的counter会忽略display:none的元素 .start{ counter-reset: son 0; } .son{ counter-increment: son 1...详情请参考CSS魔法堂：Transition就这么好玩 9.display变化时将触发reflow 撇开display:none，我们看看display:block表示元素位于BFC中，而display... 4.和display:none一样不妨碍form表单的提交 5.CSS中的counter不会忽略 6.Transition对visibility的变化有效 7.visibility

1.4K3 1

【3分钟前端早读课】如何理解CSS的Display的属性：None，Block，Inline和Block

timg.jpeg 今天的早读课，笔者将介绍Display的相关属性，主要涉及的内容包含： display: none vs. visibility: hidden display: block display...: inline display: inline-block Display: None vs.....png 如图所示，使用Display: None，我们可以看出蓝色方块从中删除，中间的空位也被绿色的方块补位。...由此可以每个Html元素都有个默认的display属性:block或inline。...如下图所示： 7DBE2F2F05BE4DDDA389E7C1B48ECFA1.png inline 按需占用空间不断行，并排显示 width,height, top-bottom margin 等属性不起作用

7640 0

css文字块-display行内元素块 inline-block 只给文字加背景

: inline-block;/* 定义为行内块元素 */ }第一行第一行第一行第二行第二行第二行...我们想要实现第二行的效果，所以用display: inline-block;给文字定义为行内元素块。...如下图图片display: display 属性规定元素应该生成的框的类型。可能的值图片值描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符。inline默认。...inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或内联元素显示。...compactCSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。markerCSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

3.6K1 0

最简单的纯js实现点击展开二级菜单功能

这里有两个点，实现展现和隐藏用display=”block“和display=”none”,另外就是要做一个判断，if else的判断当前是block还是none。 <!..."none"; else sub_menu.style.display = "block";...} 有个注意事项就是一级菜单的li不能添加a标签，不然会不起作用。...直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。...block"; else sub_menu.style.display = "none";

4.1K2 0

前端面试【CSS】— 使用 display:inline-block 会产生什么问题？解决方法？

产生的问题描述两个display为inline-block元素放到一起会产生一段空白。 <!...background: blue; display: inline-block; width: 100px; height: 100px; } </style...问题产生的原因元素被当成行内元素排版的时候，元素之间的空白符都会被浏览器处理，根据CSS中 white-space 属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符...: blue; display: inline-block; width: 100px; height: 100px; } <div class="container...font-size: 14px; background: blue; <em>display</em>: inline-<em>block</em>; width: 100px; height: 100px

3353 0

全栈第一步-CSS基础前言CSS基础总结

上文提到了可以显式设置width、height，目前也存在一些设置width/height不起作用的元素。...常见的display属性有三种，block、inline、inline-block；区别如下：摘自网络 display:block block元素会独占一行，多个block元素会各自新起一行。...默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。...布局主要靠两种属性，float和postion float float有几个属性值，left、right，none等，使用float后元素会脱离文档流，使元素display:block,float不会对其上方的元素产生影响...总结本文对近期的CSS学习做个总结，总结过程中发现自己对于position定位还不是特别清楚，后续使用过程中得继续体会，接下来准备学习下bootstrap和jquery。

5102 0

WordPress 添加个性化的博客宠物（汉纸篇）

教程中要用到的文件有：一张图片、spig.js文件下载地址：直链下载百度网盘华为网盘 WordPress 添加个性化的博客汉纸篇教程一、CSS 将下载得到的spig.png放在主题的images...然后在主题的style.css 文件下加入以下代码： /* pets devework.com */ .spig {display:block;width:150px;height:190px;position...eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none...二、加载jQuery库请确定你的主题有没有加载加载jQuery库，如果没有，请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题...php if((($display_name = wp_get_current_user()->display_name) !

1.3K5 0

WordPress 添加个性化的博客宠物（妹纸篇）

… WordPress 添加个性化的博客妹纸相关文件教程中要用到的文件有：一张图片、spig.js文件下载地址：直链下载百度网盘华为网盘 WordPress 添加个性化的博客妹纸篇教程一、CSS...然后在主题的style.css 文件下加入以下代码： /* pets devework.com */ .spig {display:block;width:150px;height:190px;position...eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none...二、加载jQuery库请确定你的主题有没有加载加载jQuery库，如果没有，请按照《为你的WordPress 选择最佳的第三方jQuery 库》与《WordPress中的jQuery库不起作用的相关问题...php if((($display_name = wp_get_current_user()->display_name) !

1.5K5 0

【前端】CSS : display

介绍元素的显示方式基本属性 none ：隐藏，且不占空间 inline ：设置元素为行内元素 block ：设置元素为块状元素 list-item ：会把元素作为列表显示 inline-block...： inline-block既具有block的宽高特性又具有inline的同行元素特性（CSS 2.1 新增） table ：作为块级表格来显示（类似table），表格前后带有换行符。...block 设置元素为块状元素如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。...inline-block inline-block既具有block的宽高特性又具有inline的同行元素特性 (CSS 2.1 新增) 例： .display4 { display: inline-block...如果项目只有一根轴线，该属性不起作用。项目属性 order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

1.7K1 0

【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

一、Display 显示模式转换 ---- display 显示模式 , 可以分为行内显示模式 ; 块内显示模式 ; 行内块显示模式 ; 将元素的显示模式修改为行内块显示模式的方法 : 使用...inline-block 可以改变显示模式 , 将元素的显示模式改为行内块显示模式 ; 使用浮动 , 也可以将块内元素改为类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置... 显示效果 : 三、inline-block 改元素为行内块元素示例 ---- 将块级元素转为行内块元素 , 行内块元素如果不设置宽度 , 默认宽度与元素内容宽度一致...head> 块元素 .box { /* 将显示模式由块级元素改为行内块元素 */ display...: inline-block; height: 100px; background-color: pink; } <div class

1.1K3 0

简单、通用的JQuery Tab实现

= "block"; } else { document.getElementById("tabPanel-" + i).style.display = "none";...ui-tabs-hide" jquery1239647486215="5"> 区域二结合我们自己编写的 CSS，或者 jQuery UI 自带的...如果你同时包含了 jQuery UI 的其它插件，那么即使不启用，也会添加一堆的 CSS 定义。...比如标签一和区域一对应，如果你的标签和区域没有对应起来，绑定 tabs() 就不起作用了。...: none; } 这样，就可以根据你的需要，结合自己的 CSS, 定制不同样式的滑动门了。

4.6K5 0

Angular 初始化显示出大括号语法的解决方法（ngCloak）

,.x-ng-cloak,.ng-hide{display:none !...{clip:rect(-1px,auto,auto,0);-ms-zoom:1;} 从上面我们可以看见angular将带有ng-clock的的元素设置为display:none，隐藏掉...\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !...important;}ng\\:form{display:block;}.ng-animate-block-transitions{transition:0s all!...那我们只能使出我们必杀技，自己把css加入我们的css文件引入heade，启动加载，ok这样就可以完美解决了。(如果你也遇见了加了ng-cloak还不起作用的话，那么试试直接引入css文件吧)

1.5K1 0

js显示隐藏 display visibility以及jquery里的show hide的区别

js显示隐藏 display visibility以及jquery里的show hide的区别文章包含个人理解，错误请您指出。...display和visibility都是css样式，而show hide则是jquery的方法 display 值描述 none 此元素不会被显示。...一样剩下了黄色和蓝色的div并且黄色跑到了顶部，其实hide方法就相当于display none隐藏，不会保留原位置。...: none; } <script src='http://libs.baidu.com/<em>jquery</em>/2.1.1/<em>jquery</em>.min.js...: <em>block</em>; } <script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js

5.5K2 0

样式化加载失败的图片

通过给元素设置CSS相关属性可以实现更美的呈现。 IMG元素你需要知道的两点知识我们可以针对IMG元素设置排版相关的CSS样式（诸如font等属性）。...正由于可替换元素收外部源的影响，因此CSS中的伪元素::before、::after对它不起作用。但是，一旦图片加载失败，伪元素就可作用于图片之上。...:("; display: block; margin-bottom: 10px; } img:after {...content: "(url: " attr(src) ")"; display: block; font-size: 12px; } 替换...* alt文本自由在图片的宽度足够容纳下它时才会显示，如果图片没有宽度，alt文本压根不会显示 ** 字体样式不会起作用 译者注：其实，针对IMG元素设置伪元素是非常好的一种backup方案，即使针对某些不支持该特性的浏览器而言也是没有副作用

2.6K7 0

高质量编码-考勤记录日历可视化

-- Bootstrap --> .center-block { display: block; margin-left: auto;...-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> 使用时保持登录OA HR平台,日历显示红色表示上午或下午未打卡...-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="/static/libs/<em>jquery</em>.js

8732 0

如何用自己喜欢的 CSS 风格重置网站的样式

I also set these elements to display: block because inline-block creates unwanted whitespace at the bottom...我还将这些元素设置为 display: block ，因为 inline-block 在元素的底部创建了不需要的空格。...Normalize.css 已经为我们做了这件事。 1[hidden] { 2 display: none; 3} 这种风格的问题是它的特异性低。...类的特异性高于属性，并且 display: none 属性不起作用。这就是为什么我选择用 !important 提高[hidden]的特异性。...1[hidden] { 2 display: none !

1.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭