css中添加display=none后其里面的js代码失效

最新推荐文章于 2024-08-23 14:45:51 发布

hhyixiaolife

最新推荐文章于 2024-08-23 14:45:51 发布

阅读量4.5k

点赞数 2

本文链接：https://blog.csdn.net/hhyixiaolife/article/details/83692498

版权

1，display=none以后，元素相当于已经不存在了，如果有针对该元素的js代码，肯定无法获取到对象，自然代码就会失效

display=none与visibility=hidden不同，前者表示元素已经不在文档流中，不占据任何位置，而后者只是隐藏，元素依然在文档流中，占据着位置

2，在chrome中，display属性需为""才表示该元素隐藏，none值错误

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hhyixiaolife

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS diaplay=“grid“未生效与display:block

Nie2014的博客

07-12

1640

1、CSS grid可以通过嵌套生成更灵活的页面布局。参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例 <p class="container"> <p class="item">One</p> <p class="item">Two</p> <p class="item">Three</p> <p class="item inner-grid"> <p clas

display:none后没有过度动画,transition未生效

最新发布

一颗松鼠

11-06

373

属性，而不需要去修改 JavaScript 中的逻辑，这对于统一管理和维护项目的过渡动画效果非常方便。在前端开发中，当我们想要实现一个元素从隐藏到显示的过渡动画时，通常会遇到一个常见的问题，那就是。的组合能够保持良好的性能表现，避免了不必要的 DOM 操作，是实现平滑过渡动画的理想选择。时，元素不会出现在页面中，也不会占用空间，但仍然可以在元素上进行动画过渡。这两个 CSS 属性，既能实现隐藏与显示的效果，同时又能保持过渡动画的平滑过渡。时，元素会恢复显示，并且所有的过渡动画都能平滑地过渡。

参与评论您还未登录，请先登录后发表或查看评论

<div style="display:none">中更改的内容使用js无法获取

yueyeyi1的专栏

03-28

3521

使用页面弹出弹出层的时候无法获取到弹出层上面的input输入框里面的值的解决办法：原因：当使用display：none 隐藏了div的时候，这个div知识隐藏了，使用弹出层显示的时候实际上是复制了，我们在弹出层修改值，但是源界面上的div的内容并没有改变，所以就出现了修改后 alert出来的仍然没有改变的结果，解决的方法是： var nodeId=$("#windown-content

（转）css元素隐藏原理及display:none和visibility:hidden

weixin_34228617的博客

09-05

242

原文链接：http://www.jb51.net/web/73987.html 在CSS中，让元素隐藏指屏幕范围内肉眼不可见的方法很多，只不过有的依然保留空间，而有的却消失的不留痕迹,接下来本文将详细介绍下css元素隐藏原理，感兴趣的你可不要错过了哈一、CSS元素隐藏在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击...

当移动端H5中的display:flex不生效时，给我整破防了

weixin_47389477的博客

08-23

431

display：none会不会导致其所占空间消失？

weixin_54681929的博客

04-28

2683

display：none；的验证结果是该元素所占空间消失，验证例子为： <!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> div{ width:500px; height:500px; } .num1{ b

关于jQuery.treeview在父级容器样式为display:none时，出现异常的解决方法！

iteye_3943的博客

07-15

213

jQuery非常非常棒，不但能帮你轻松实现很多很多你想要的“美妙”效果，而且还不影响页面的SEO优化，大家应该知道，如果js或ajax用多了，SEO将是非常糟糕的，原因，我不想多说，总之，一点，js只能参与控制网页元素，不能参与内容控制，否则，将大大地对SEO优化不利，就凭这一点，已经足够让我喜欢jQuery了。用jQuery，可以完全只操控页面上的元素，而不参考内容的控制，这个对于SEO...

css display:none使用

yymh123的专栏

10-15

1438

1.如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元素显示的前提下，使用js代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元素显示后才能正确获得这些值 2.有些情况下可以使用style.visibility来代替style.displ

谈谈CSS隐藏元素(display,visibility)的区别

09-25

在CSS中，隐藏元素是网页设计中常见的需求，主要通过`display`和`visibility`两个属性来实现。它们之间的区别在于元素的占用空间、可点击性、页面渲染的影响以及对子孙元素的影响。首先，`display:none`是完全隐藏...

CSS隐藏元素 display visibility opacity的区别.docx

07-24

在CSS中，隐藏元素的方法主要有三种：`display:none`、`visibility:hidden`和`opacity:0`，它们各自有不同的特点和适用场景。 1. `display:none`：此属性会使元素完全从页面布局中消失，不占据任何空间。元素及其...

纯CSS实现下拉菜单的示例代码

01-19

本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下：将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。 <style> ul{ ...

JS DOM操作无法获取display属性问题（获取非行内样式问题及解决办法）

qq_38981275的博客

06-09

3009

先把代码贴出来吧：下面是初始化效果：

CSS计数器在display为none时无法正确使用的解决方法

瑞风轻拂

03-06

1953

问题：界面html代码如下，ol里面的内容需要事先隐藏，并给ol加上一个计数器，将该页面ol从隐藏变为显示时，序号全部为0或1，而不是递增序号，所有浏览器都是如此。 ; ... ... 解决办法：首先是查看计数器css属性counter-reset、counter-increment等的使用方法，发现如果使用 "display: none"，则无法重置计数器。如果使用 "vis

javascript中div不响应onkeydown事件问题及解决

预流

03-31

3772

这两周被js坑了好几次，所以最近几篇写写这个，记录下被坑的日子。这次有一个需求，要做一个类似百度搜索之类的效果出来，输入拼音字母，直接列出与该拼音相关的中文结果。效果如下：这里我是通过在js中动态添加div的方式来做的，即每一行结果一个div。问题来了，需要支持在输入框中按下向下键时光标即移到下一行的【充值金额查询（渠道）】。我给这些js写的div都注册了onkeydown事件，...

display:none到display:block失效问题及解决办法

海风依旧

10-19

3472

项目开发中display:none到display:block失效问题及解决办法

layer弹层content写错导致div复制了一次，导致id失效 $().val() 获取不到dispaly:none div里表单的值

LiuCabbage

11-26

393

错误之源： $("a.consult").click(function () { lib_consult_html = $('#consult-html').html(); /*复制了一份div*/ layer.open({ type: 1, title: false, closeBt...

layer弹层content写错导致div复制了一次，导致id失效 $().val() 获取不到dispaly:none div里表单的值...

weixin_30507481的博客

11-26

299

错误之源： $("a.consult").click(function () { lib_consult_html = $('#consult-html').html();/*复制了一份div*/ layer.open({ type: 1, title: false, ...

css浮动display：flex

08-19

引用中提到，flex是CSS中的一种布局手段，用来代替浮动来完成页面的布局。display: flex是将一个元素指定为弹性容器，使其内部的子元素能够具有弹性，可以根据页面大小的改变而自动调整布局。这样的布局方式可以更方便地实现响应式设计。使用display: flex后，子元素的浮动属性失效，而是使用弹性盒模型进行布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [前端基础入门之css 弹性盒 display:flex](https://blog.csdn.net/agonie201218/article/details/125382378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]