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

最新推荐文章于 2023-02-09 23:25:48 发布

西丽炒粉炒面

最新推荐文章于 2023-02-09 23:25:48 发布

阅读量2.3k

点赞数 5

文章标签： js css

本文链接：https://blog.csdn.net/roylinziyang/article/details/112464943

版权

在完成公司项目时需要去动态计算高度然后设置给元素，但是由于项目本身已经书写过样式，导致设置的样式权重不够需要添加important来增加权重，在这个过程中发现:

	// 可以生效
	dom.style.height = '60px'
	// 无法生效
	dom.style.height = '60px !important'

在网上查阅后并实践后发现以下方式可行:

	dom.style.setProperty('height', '60px', 'important')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

西丽炒粉炒面

关注关注

5
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

m0_63853518的博客

05-10

1561

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

js添加css属性导致:hover无效的解决办法

热门推荐

qq_43210381的博客

02-13

1万+

css的样式的特性之一：重要性重要规则：不同的css样式具有不同的权重，对于同一元素，后定义的css样式会代替先定义的css样式，但有时候设计师需要某个css样式拥有最高的权重，此时就需要标出此css样式为“重要规则”。阅读到一本书，书中贴了如下代码： .font01{color: red;} p { color: blue； !important } <p class="font...

加了！important没用？失效了？记录一个一直被我忽视的关于！important提升权重的问题

姜雪辞的博客

07-09

9228

情景再现这是我今天写一个小demo时发现的自己一直忽视的问题。先截取一下我的代码片段： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style> #box { color: green !important; } .pink-text { color:

js给元素添加css样式，加important不生效问题

lixiaonaaa的博客

01-24

2697

需要在js里设置css样式，加important，发现并不生效，甚至样式都没有加上： // 点击事件 myChart.on('click', function(params) { var color = params.color; var id = params.data.id; $(`tr[data-uniqueid="${id}"]`).css('background', color+'!important'); }) 后来发现这样写是正确的： // 点击事件.

JS设置CSS样式的方式汇总

11-30

important值无效如果属性有’-‘号，就写成驼峰的形式（如textAlign）如果想保留 – 号，就中括号的形式 element.style[‘text-align’] = ‘100px’; element.style.height = '100px'; 2. 直接设置属性（只能...

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

10-22

important`的CSS样式时，使用jQuery的`.css("cssText", "...")`方法是一种有效的方法。这种方法可以确保新的样式规则覆盖已有的`!important`规则，从而实现动态样式修改。在实际开发中，应谨慎使用`!important`，...

react-embedded-animations：React库可在嵌入式体验中使用动画，其中需要在CSS中使用！important

02-18

React库可以在嵌入式体验上使用动画，而CSS中需要使用！important。什么时候使用在大多数情况下，不应使用该库，仅在以下情况下使用：如果需要在动画CSS上使用！important 安装 npm install --save react-...

vue中element组件样式修改无效的解决方法

08-28

为了解决Element UI组件样式修改无效的问题，我们可以采取以下几种策略： 1. **移除 scoped 属性**：就像问题描述中提到的，如果需要修改Element UI组件的样式，可以尝试去掉`<style>`标签内的`scoped`属性。这样...

动态增加class无效？css优先级不够？使用【!important】即可

Dream丶Boy

04-12

4228

定义及语法 !important，作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important}，即写在定义的最后面，例如：box{color:red !important;}。浏览器识别`ie7`及 ie7 firefox chrome等浏览器下，已经可以识别 !important属性，但是IE 6.0IE6及更早浏览器下仍然不能完全识别。important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先.

jQuery修改!important的css样式&jQuery修改css未生效

weixin_49098968的博客

02-09

2097

jQuery修改带有!important的css样式以及jQuery修改css未生效的解决办法

CSS权重——发现样式正确但不起效果时，就要考虑规则的权重问题

Smile林的博客

04-07

529

什么是权重？当很多的规则(样式)被应用到元素时，权重是一个决定那种规则生效，或者优先级的过程样式权重的计算时相加关系，值越高，权重越高，优先级越大权重等级与权值行内样式（1000）>id选择器（100）>类，属性选择器和伪类选择器（10）>元素和伪元素（1）>*通配符(0) 最高：!important加在样式属性值后，权重值为 10000（尽量不要使用） ...

JS中加载CSS无效问题

windskiper的博客

06-17

1575

问题场景：在xx.js中导入common.css文件 <link href="/static/bootstrap/css/dashboard.css" rel="stylesheet"> 在common.css中包含 .uneditable {background-color:#9d9d9d;} 但是实际页面中未起效分析： 1 首先，引入的文件格式没有明显错误 2 F12在浏览器中进行检查，Console没有任何错误打印这就排除了引入文件路径问题/引入文件因格.

用js修改带!important的css样式

weixin_30386713的博客

02-29

304

普通jQuery修改css的方法或者用dom.style.width="100px"的原生方法修改具有!important表示的样式都无效。查看了w3c标准之后，发现另外一个原生方法可以在修改的时候指定优先级，并且使用之后可行。代码如下： dom.style.setProperty("width","100px","important"); dom.style是一个CSSStyleDe...

原生JS添加样式 & 内联important

shihezhengshz的博客

08-18

3740

1.直接设置style——无法设置important 单个设置：适用于IE系列，样式名需要小驼峰书写 element.style.backgroundColor = "#ccc" 批量设置：样式怎么写，你就怎么写，不适用于IE系列 element.style = "width:100px;background-color:#ccc;" 2.通过设置属性，设置style——可以设置important 样式怎么写，你就怎么写但这...

DOM操作-04-style属性的获取和修改

qq_41874591的博客

04-23

2034

文章目录语法：第二种语法：style.cssText小例子：1.鼠标进入区域大小和透明度发生改变2.文本框高亮显示3.隔行变色，鼠标进入高亮，鼠标离开恢复获取当前显示的属性值（不管什么样式的css）语法：获取：元素节点.style.属性名 eg:elementById.style.margin 修改：元素节点.style.属性名=“属性值” eg：elementById.style.backgroundColor=“green”; 注意：获取不了内嵌式属性 <head> &lt

element.style 继承样式打乱原有样式 --增加important“加强该属性的级别

weixin_39709920的博客

06-04

735

正常情况下style属性中的级别是最高的，但是2113在样式表中可5261以用”声明（important）“加强该属性的级别，如： <div class="demo" style="width: 100px;height: 100px;background: red;"></div> .demo { background: blue; } 上面的写法div的背景色显示为4102红色，但如果我们这样写： .demo { background: blue!important; } div

解决个人CSS开发中的兼容性问题全攻略

本教程针对个人在CSS开发过程中常见的兼容性问题进行了详细总结，主要关注...通过这些技巧，开发者可以更好地解决在不同浏览器上CSS和JavaScript代码的兼容性问题，提升用户体验，尤其是在处理历史版本的IE浏览器时。