用js修改带!important的css样式

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

dom.style.setProperty("width","100px","important");

dom.style是一个CSSStyleDeclaration对象，w3c中对它的解释的地址
https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleDeclaration

另外经过尝试，先删除属性再添加也行，如下：

dom.style.removeProperty("width");
dom.style.setProperty("width","100px");

时间： 2024-10-12 15:34:09

用js修改带!important的css样式的相关文章

用JS改变的元素CSS样式

CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000&qu

CSS怎样改变行内样式（通过外部级联样式表） css !important用法CSS样式使用优先级判断

CSS样式优先级行内>内部>外部使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式. IE6不认识它的,IE7和别的浏览器中可以用,用来处理浏览器的兼容性 .padding-l-r p span

js 设置多条css样式

如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:var obj = document.getElementById("mydiv");给节点添加css:如果需要添加的css不多的话,可以obj.style.width = "300px";如果需要添加多条css语句的话,这样会有多条,如:obj.style.width="300px";obj.style.height="300px"

js获取、修改CSS样式

CSS样式分为三种,行内样式.内部样式.外部样式. 一.element.style.stylename 创建.获取.修改行内样式 console.log(document.getElementById("testcss0").style.backgroundColor);//"" document.getElementById("testcss0").style.backgroundColor = "black&quo

js之如何获取css样式

一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> 2 <script> 3 var myDiv = document.getElementById("myDiv"); 4 5 alert(myDiv.style.width);//100

对于用js获取元素的css样式属性(getComputedStyle,currentStyle,style)(getPropertyValue,getAttribute)

首先单独拎出来讲的是style style: nodeObject.style.cssProperty获取的是DOM节点上 style 属性定义的样式,如果不存在 style 属性,或者 style 属性没有定义相应的样式,则是无法获取的.也就是说,JavaScript 不会到 <style> 标签或者 CSS 文件去获取相应的样式,只能获取 style 属性定义的样式. 就是外部样式表,内部样式表,用style都是无效的,只有内联样式是有效的,当然用style写入也是写入在内联样式的. 然后

通过js修改图片的css样式，实现简单的图片旋转

html代码: <img style="max-width: 700px; transform: rotate(360deg);" src="/image/test1.img" class="image1"> <input type="hidden" value="0" name="tran_num1"> <a href="javascript:;

通过js获取元素的css样式属性

var display = this.currentStyle? this.currentStyle.display: window.getComputedStyle(this, null).display; 这样可以获取定义在内部~外部样式表以及内嵌的所有的样式~当然这里指获取display属性~简单来说就是只要定义了display~不管在哪里设置的~都可以获取出来

在js中批量设置css样式

function css(target,styles){ for (var k in styles){ target.style[k]=styles[k]; } } 示例: var div = document.querySelector("div"); css(div,{width:300+"px",height: 400+"px",backgroundColor:green});