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

最新推荐文章于 2022-09-12 19:02:41 发布

Big_Old_Fish

最新推荐文章于 2022-09-12 19:02:41 发布

阅读量6.2k

点赞数

分类专栏：前端文章标签： js important

本文链接：https://blog.csdn.net/Big_Old_Fish/article/details/52785609

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Big_Old_Fish

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

css选择器优先级和js基础

RJJJJJ的博客

08-14

842

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

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

最新发布

m0_63853518的博客

05-10

945

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

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

深入理解css优先级

半夏

04-29

301

原文：https://www.cnblogs.com/starof/p/4387525.html 先来看几个例子： <html> <style type="text/css"> body h1 { color: green; } html h1 { color: purple; } </style> <body> <h1>Here is a title!</h1> </body> </html&gt

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

07-18

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

关于CSS样式优先级

a634814086的博客

06-17

343

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

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

一个普通人的博客

09-12

593

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

CSS的优先级和权重问题以及!important优先级问题

k157507281的博客

07-26

976

一，前言：刚加的css怎么没有渲染出来？浏览器中查看，发现是被其他的css给覆盖了，相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢？换句话说，css选择器的优先级是怎么规定的？二、正文：先上一个例子 <div id = "outerId" class = "outerClass"> <div id = "innererId" class ...

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

10-22

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

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

10-19

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

如何突破CSS内联的最高优先级！important

Aiolimp的博客

09-12

572

如何突破CSS内联的最高优先级！important 再不改变当前代码的情况下，使这张图片的宽度为300px <img src="1.jpg" style="width:480px !important"> CSS方法： <img src="img/1.jpg" style="width: 300px !important;max-width: 200px;"> <img src="img/1.jpg" style="width: 300px !important;tran

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

12-13

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

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

JOKER0707的博客

03-03

457

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

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

hsany330的专栏

05-12

1526

如果有人在 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;"

页面中js、css等元素的顺序

stone_yy的专栏

10-13

197

一般顺序为头css、中间主体、尾部为js代码，这样整体的页面加载速度为最优。但如果是引入的js文件而不是代码时的加载顺序不知如何？应该是按引入顺序吧，相关可以参考如下资料： [list] [*]动态引入的外部 JS 文件在各浏览器中的加载顺序不一致： http://w3help.org/zh-cn/causes/BX9013 [*]JavaScript中的对象动态加载技术 ...

[css] 行内css和important哪个优先级高？

歌谣的博客

02-20

3475

[css] 行内css和important哪个优先级高？ !important 将覆盖行内css css优先级：行内css>id选择器(#)>伪类(:)>属性选择器([])>类选择器(.) > 类型选择器(div p a等) > 通用选择器(*) 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

简单了解css

黎先生的博客

10-30

386

全栈工程师开发手册（作者：栾鹏）一个demo学会css css选择器全解 css操作语法全解学习了css权威指南这本书，自己喜欢边学边总结边写demo，所以写了这篇文章，包含了大部分的css编程知识。让你一个demo掌握css编程，如果有问题可以留言。 css的知识主要包括两部分：1、选中样式，2、设置样式。对应的css语法为1、css选择器，2、c

css中使用'!important'使属性值有最高优先级

u010227042的博客

11-12

1901

本文仅作为工作中的技术归纳和记录！ .myStyle { height: 150px; width: 100%; font-size: 14px; } .myStyle { font-size: 12px; color: #ccc; } 以上样式定义完成后，若html中的class应用myStyle样式，则font-size: 12px;会得到应用。（别...

css中使用!important优先级最高问题