如何使用 jquery 覆盖包含 '!important' 的 css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19828515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override css containing '!important' using jquery?
提问by SHEKHAR SHETE
I want to apply heightfor specific div using jquery but not able to override the '!important'keyword using jquery.
我想height使用 jquery申请特定的 div 但无法'!important'使用jquery.
Here is markup:
这是标记：
<div id="divL1" class="myclass">sometext here</div>
<div id="divL2" class="myclass">sometext here</div>
<div id="divL3" class="myclass">sometext here</div>
<div id="divL4" class="myclass">sometext here</div>
css:
css：
.myclass{
height:50px !important;
}
Here i want to find the class"myclass" where divid equals "divL3"
在这里我想找到classdivid等于“divL3”的“myclass”
I have Tried with:
我试过：
$('#divL3.myclass').css('height', '0px');
but wont work! so, how to override '!important' css using jquery.
但不会工作！那么，如何覆盖'!important' css using jquery.
Help appreciated!
帮助表示赞赏！
回答by Fendy Kusuma
Try This :
尝试这个 ：
$( '.myclass' ).each(function () {
this.style.setProperty( 'height', '0px', 'important' );
});
.setProperty () enables you to pass a third argument which represents the priority.
.setProperty () 使您能够传递代表优先级的第三个参数。
回答by user3556813
Another Easy method to solve this issue adding style attribute.
解决此问题的另一种简单方法是添加样式属性。
$('.selector').attr('style','width:500px !important');
This will solve your problem easily... :)
这将轻松解决您的问题... :)
回答by hawkeye126
You can do this:
你可以这样做：
$(".myclass").css("cssText", "height: 0 !important;");
Using "cssText" as the property name and whatever you want added to the css as it's value.
使用“cssText”作为属性名称以及任何你想添加到 css 中的值作为它的值。
回答by Praveen
inline style fails to override the !important given in stylesheets.
内联样式无法覆盖样式表中给出的 !important。
Therefore !importantcan be overridden only by using !importantalong jQuery
因此，!important只能通过覆盖!important沿jQuery
Try like
试试像
$('#divL3.myclass').attr('style', 'height: 0px !important');
回答by abhiklpm
This will work like a charm
这将像魅力一样发挥作用
$( '#divL3' ).css("cssText", "height: 0px !important;")
here's the fiddle http://jsfiddle.net/abhiklpm/Z3WHM/2/
回答by mahendran
no use.suppose if i have some css properties in style attribure.it won't work.so please use below code
没有用。假设如果我在样式属性中有一些 css 属性，它将不起作用。所以请使用下面的代码
var styleAttr = $("#divAddDetailPans").attr('style');
$("#divAddDetailPans").removeAttr('style');
$("#divAddDetailPans").attr('style', styleAttr.replace('top: 198px !important', 'top: 78px !important'));
回答by hatsrumandcode
I prefer to create a class and add it to specific div, for example
我更喜欢创建一个类并将其添加到特定的 div，例如
This can be either inline or in an external CSS file:
这可以是内联的，也可以是在外部 CSS 文件中：
<style>
.class-with-important { height: 0px !important; }
</style>
If this is something that is never going to change, you can manually add the class to that div:
如果这是永远不会改变的东西，您可以手动将类添加到该 div：
<div id="divL3" class="myclass class-with-important">sometext here</div>
or you can use jQuery to add this script tag at the bottom of that page
或者您可以使用 jQuery 在该页面底部添加此脚本标记
<script>
$(document).ready(function(){
$('#divL3').addClass("class-with-important");
});
</script>
You can use the 'style' option, but would recommend doing it this way:
您可以使用 'style' 选项，但建议您这样做：
var currentStyle = $('#divL3').attr('style');
$('#divL3').attr('style', currentStyle + ' width:500px !important;');
This way you do not override the existing style, in case a third party plugin adds any dynamic style to your page, which is not unusual if you are using a CMS like WordPress.
这样您就不会覆盖现有的样式，以防第三方插件向您的页面添加任何动态样式，如果您使用像 WordPress 这样的 CMS，这并不罕见。
回答by Zainul Abdin
First Id is unique identifier, therefore you don't need to search div by it's class name. therefore you can filter div by it's id.
First Id 是唯一标识符，因此您无需通过其类名搜索 div。因此你可以通过它的 id 过滤 div。
Try following code
试试下面的代码
first add new Class property below myClass like this
首先像这样在 myClass 下添加新的 Class 属性
<style>
.myclass{
height:50px !important;
border: 1px solid red;
}
.testClass{
height: 0 !important;
}
</style>
it will override height property of myClass
它将覆盖 myClass 的高度属性
now just add this class to div
现在只需将此类添加到 div
$('#divL3').addClass('testClass');
but making height "0" wont hide content of "divL3". you rather try to hide overflow content or hide entire div by adding css property display:none
但使高度为“0”不会隐藏“divL3”的内容。您宁愿尝试通过添加 css 属性 display:none 来隐藏溢出内容或隐藏整个 div
hope it will work for you.
希望它对你有用。
回答by Ayyappan Sekar
There is another trick to get it done!!! Can you remove the myclassfrom the element and apply the height. Like
还有一个技巧可以完成它！！！你myclass能从元素中删除并应用高度吗？喜欢
$('#divL3.myclass').removeClass('myclass').css('height', '0px');
回答by TGH
$('#divL3.myclass').attr('style', 'height:0px !important');
Would something like the above work?
像上面这样的工作吗？
