js修改的样式与!important的优先级

最新推荐文章于 2024-05-10 10:30:37 发布

原创最新推荐文章于 2024-05-10 10:30:37 发布 · 6.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js important

前端专栏收录该内容

1 篇文章

订阅专栏

本文探讨了使用JavaScript修改外部CSS文件中带有!important标志的样式属性时遇到的问题。实验表明，当样式规则设置为!important时，通过JavaScript直接修改该样式的值无法生效。

今天在html文件头部写了一段js用来修改外部CSS文件的一个样式，其中外部文件中的该样式在应用到不同的media 中时各重写了一遍。

调用js修改后每个media下的该样式都被改写。

修改其中一个media下的样式优先级为!important，再调用js修改，其他media下的该样式均和之前一样被修改，而应用了!important的样式没有被修改，依然维持原状。

结论：单纯调用js修改属性值时不能修改到应用了!mportant的属性值。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Big_Old_Fish

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

分析 CSS 优先级冲突时 !important 的解析规则

weixin_41455464的博客

10-18

547

important是一个强大的工具，但必须谨慎使用。滥用!important会导致 CSS 代码难以维护和调试。应该尽可能使用更 Specific 的选择器或重新组织 CSS 结构来解决优先级冲突。只有在真正需要覆盖第三方库样式、创建实用类或处理用户样式时，才应该考虑使用!important。深入理解!important的优先级规则，并结合浏览器的开发者工具进行调试，可以更好地控制 CSS 样式，避免不必要的冲突。

从可维护性角度考虑css的!important规则的可用性

12-13

important`规则是一种强制应用样式的机制，它允许开发者在特定情况下覆盖其他具有相同选择器和优先级的样式。然而，过度使用`!important`可能会对代码的可维护性和项目的长远发展产生负面影响。下面我们将详细探讨`!...

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

关于CSS样式优先级

a634814086的博客

06-17

413

一般情况下： [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。 ...

通过jquery修改带有!important的样式

07-18

加了!important的css怎么用js修改呢？原来这样就可以

【CSS优先级与！important】

魔术师

06-03

2472

【CSS优先级与！important】 CSS样式优先级： 1、相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。 2、权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式。

js ！important

power8988的博客

07-20

657

http://www.techug.com/post/10-javascript-concepts-every-programmer-must-master.html?ref=myread

css选择器优先级和js基础

RJJJJJ的博客

08-14

936

选择器的优先级 权重值越大优先级就越高(无论权重是多少，内联样式表的优先级都是最高的) 元素选择器/*：权重为1 类选择器：权重为2 id选择器：权重为4 群组选择器：看每个独立选择器的权重值分别为多少后代、自带选择器：权重为所有被大于符号或空格隔开的选择器的权重之和 js基础认识js 什么是js js就是JavaScript，是一门专门用来控制前端页面的编程语言(属于脚本语言) js是web标准中的行为标准，主要负责网页中内容的修改 js代码位置内联js

如何使用jquery修改css中带有!important的样式属性

10-22

important`规则可以进一步提升特定样式的优先级，使其超越正常选择器权重。在本例中，我们有一个类为`.test`的`<div>`，其宽度和溢出属性被设置为`auto !important`，这意味着这些样式将被强制应用，除非有更高的...

详解CSS样式中的!important、*、_符号

10-19

important、*和_在CSS中均与样式的优先级有关，但在实际的网页设计和开发中，为了保持代码的可维护性和兼容性，我们更推荐使用CSS预处理器、JavaScript以及现代的CSS特性如Flexbox和Grid布局等来处理样式的优先级和...

Unocss中!important的使用与优先级解析

这种设计极大地简化了开发者对优先级的干预过程，无需修改全局样式表或引入复杂的 CSS specificity 计算，即可快速解决组件间样式覆盖的问题。更重要的是，该机制与 Unocss 的预设（presets）、规则（rules）和变换...

解决js添加css样式设置!important无效问题

最新发布

m0_63853518的博客

05-10

1701

2，几种解决后生效的的代码。

Web前端之JavaScript动态添加important样式、禁止页面出现光标、动态修改css值、样式最高优先级、隐藏鼠标光标、区别、setAttribute、setProperty、cssText

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

09-05

2844

Web前端之JavaScript动态添加important样式、禁止页面出现光标、动态修改css值、样式最高优先级、隐藏鼠标光标、区别、setAttribute、setProperty、cssText

[Web前端基础] CSS优先级、JS运算优先级、CSS设置在第几行进行超出部分省略号、JS设置元素样式的六种方式

一个普通人的博客

09-12

678

important> 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承。

JavaScript修改DOM节点时，样式优先级的问题

JOKER0707的博客

03-03

522

　　通过element.style.xxx设置或者读取的xxx样式属性，都是属于行间样式（<p style="color=red"></p>)，并不是使用link的外部css文件或者在<style></style>标签中定义的样式　　样式优先级：* < tagName < class < id < 行间(...

JS设置CSS样式的几种方式（js设置!important）

Memory1011的博客

01-03

562

转自：http://www.pinlue.com/article/2020/12/2301/1511438482400.html

比 style 内联样式优先级更高的：!important

hsany330的专栏

05-12

1686

如果有人在 HTML 中写了 style 样式，这个级别很高，要改变其值，只能用 !important 了。 <style type="text/css"> .a { display:none!important; } .b { display:none; } </style> <div class="a" style="display:block;">aaa不显示</div> <div class="b" style="display:block;"