`

class里面定义的display属性无法通过js改变

浏览器 
阅读更多

class里面定义的display属性无法通过js改变，非常郁闷的问题，以前遇到过一次，这次有忘记了，调试了n久才想起来。

自己在元素上定义style="display:none" 用js可以动态改变，但是如果把display属性定义到class里面就不行了。

同时定义也不行，如：<div id="note_list_div" class="note_list_div" style="display:none;"></div>

.note_list_div{display:none;width:100%;clear:both;}

 

按照标准应该是元素上的style优先级高于class的，在js控制的时候就不起作用了，浏览器不按标准行事经常出现非常理的bug真是郁闷啊。

分享到：
| 定时器 倒计时的一个实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用JS来控制DIV样式的display属性

    通过以上实例，我们可以看到使用JavaScript控制DIV元素的`display`属性是一种非常实用且高效的方法。这种技术不仅能够提高用户体验，还能够简化前端开发流程。希望本文的内容能够帮助大家更好地理解和应用JavaScript...

    微信小程序实现通过js操作wxml的wxss属性示例

    在微信小程序中，由于无法像Web开发那样直接通过JavaScript操作DOM元素的CSS属性，因此需要采取不同的策略来实现动态样式更改。本实例介绍了一种方法，即通过数据绑定来实现JavaScript对WXML（微信小程序的结构层）...

    前端学习笔记，做一个简单的网站-将class的属性值中的hide更换为show，学习代码

    1. **类名切换**：当你想要切换元素的可见性时，可以使用JavaScript来改变元素的class属性值。JavaScript是网页的动态编程语言，它可以与用户交互并更新页面内容。例如，以下JavaScript代码会将元素的class从"hide...

    【JavaScript源代码】JS实现页面侧边栏效果探究.docx

    因此，我们可以先通过`display`属性让元素可见，然后通过改变`transform`属性实现平滑移动。例如： ```javascript let ds = document.getElementById('sidebar'); ds.style.display = 'block'; ds.offsetHeight; //...

    display tag使用帮助

    7. **样式定制**：Display Tag允许自定义表格样式，通过CSS和`class`属性可以控制表格、行、单元格等元素的样式。 8. **条件渲染**：使用`decorator`属性，可以定义一个装饰器类，根据特定条件改变列的显示。 9. *...

    vue通过style或者class改变样式的实例代码

    在Vue.js框架中，改变元素样式的操作是前端开发中常见的需求，Vue为此提供了灵活的方式来通过绑定class或style来控制元素的样式。本知识点将详细介绍如何在Vue中使用class或style来动态改变元素的样式，并通过实例...

    利用js实现展开效果

    然后在JavaScript中改变`display`属性，过渡效果就会自动应用。 5. **jQuery库**：虽然本文主要介绍原生JavaScript，但值得一提的是，jQuery库提供了一种更简洁的方法来处理这些操作。例如，`slideToggle`方法可以...

    智能社JavaScript系列视频案例笔记

    通过改变`style.display`属性实现元素的显示和隐藏。 3. **CSS样式更改事件**：`onmouseover`和`onmouseout`同样可以用来改变元素的样式。案例3展示了如何在鼠标移入和移出时改变`div1`的宽、高和背景色，通过`...

    js可定义时间的全屏收缩广告代码.rar

    JavaScript提供了`document.getElementById`, `querySelector`, `querySelectorAll`等方法来获取DOM元素，以及`style`属性或`classList`来改变元素的样式，例如显示、隐藏（通过修改`display`属性）。 2. **事件...

    JavaScript实现隐藏菜单

    这样，当菜单的`display`属性改变时，`opacity`的过渡效果会让菜单的显示和隐藏更加平滑。 在实际项目中，为了提高代码的可维护性和复用性，可以考虑使用事件监听器而不是内联`onclick`属性，以及将JavaScript代码...

    在线答疑 可伸缩JS代码

    JavaScript可以通过改变元素的style.display属性来完成这一任务。例如，如果想要隐藏一个元素，我们可以将其display属性设置为none，而要显示元素，可以将其设置为block或其他合适的值。这种方法在创建交互式元素、...

    js实现照片墙效果

    通常，我们可以创建一个包含多个`&lt;img&gt;`标签的容器，每个`&lt;img&gt;`标签代表一张图片，通过设置`src`属性加载图片，`class`或`id`属性用于JavaScript操作。 2. **CSS样式**：CSS负责美化和布局。可以使用CSS Grid或...

    JS折叠菜单

    另一种方法是使用纯JavaScript的`classList.add()`和`classList.remove()`来切换CSS类，从而改变元素的`display`属性。 在实际应用中，折叠菜单还可以结合CSS3的过渡效果（`transition`）和动画（`animation`）来...

    javascript写的图片切换代码

    这里，`transition`属性定义了当`opacity`属性改变时的动画效果。 总结一下，使用JavaScript实现图片切换功能涉及以下几个核心知识点： 1. HTML结构：创建包含多张图片的容器。 2. CSS样式：隐藏/显示图片，以及...

    Vue.js入门课程.pdf

    Vue.js 是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。它由前谷歌工程师尤雨溪所创建，目的是为了简化动态数据驱动的Web应用的开发。Vue.js以其渐进式的特点和易学易用著称，可以用于简单的数据...

    js 显示/隐藏某些列

    - `style.display`属性：通过设置`style.display = 'none'`来隐藏元素，或者`style.display = 'table-cell'`（对于表格元素）或`style.display = 'block'`（对于非表格元素）来显示它。 - `classList`接口：可以...

    JS显示隐藏HTML控件

    - `display`属性：CSS中，`display`属性用于定义元素的显示方式。设置为`none`时，元素将不占据任何空间，即隐藏；默认值（如`block`或`inline`）则表示元素正常显示。 - `visibility`属性：设置为`hidden`时，...

    js图片滚动

    JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态效果的实现。在网页设计中，图片滚动是一种常见的视觉效果，能够吸引用户的注意力并增加页面的动态感。本文将深入探讨如何使用JavaScript实现图片...

    js tabs 菜单

    JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，特别是在前端领域。在网页设计中，"tabs"菜单是一种常见的交互元素，它可以帮助用户更有效地组织和展示信息。"js tabs 菜单"通常...

    JS 实现活动日历代码

    JavaScript（简称JS）是一种广泛用于网页和网络应用的编程语言，尤其在客户端脚本中扮演着重要角色。本文将深入探讨如何使用JS实现一个活动日历功能，包括在日历中添加活动，以及当鼠标悬停在有活动的日期上时，如何...

Magicbox
Global site tag (gtag.js) - Google Analytics