如何使用jquery删除样式标记中的#idname.classname｛｝

Question

不太确定如何用词，但这是我正在使用的CSS代码。

<style>
#st_advanced_menu_wrap .m_alignment_0 .advanced_style_wide,
#st_advanced_menu_wrap .m_alignment_3 .advanced_style_wide {
left:0;
}
</style>

如何使用jquery$('.className'(.removeClass('className'(当样式代码使用多个ID AND类时？如何在jquery代码的'.className'部分中引用所有这些？我想从无法在内部修改或编辑的文档中删除这段代码。我只能添加到现有代码中。我对jquery的工作原理还很陌生。谢谢

Answer 1

这里有一个添加和删除类的简单方法&带有jQuery 的ID

$('.addColor').on("click", function(){
$('.box').addClass("blue")
})
$('.removeColor').on("click", function(){
$('.box').removeClass("blue")
})
$('.addId').click(function(e){
$(".box").attr("id", "yellow");
});
$('.removeID').click(function(e){
$('.box').removeAttr('id');
});

.box {
display: block;
width: 100px;
height: 100px;
background-color: red;
}
.blue {
background-color: blue;
}
#yellow {
background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<br />
<button class="addColor">Click to add class</button>
<br /><br />
<button class="removeColor">Click remove class</button>
<br /><br />
<button class="addId">Click add an ID (yellow)</button>
<br /><br />
<button class="removeID">Click remove an ID</button>

JSFiddle示例

Answer 2

您可以在页面中插入另一个<style>元素来覆盖上一个元素的值。

虽然不是最佳实践，但您可以使用!important标志来确保您的规则优先选择

var myStyle = '
#st_advanced_menu_wrap .m_alignment_0 .advanced_style_wide,
#st_advanced_menu_wrap .m_alignment_3 .advanced_style_wide { 
left:auto!important;
}';
$('body').append($('<style>'+myStyle+'</style>'));

反斜杠仅用于提高代码的可读性

否则，您可以将elements类从.advanced_style_wide更改为其他类，或者使用jQuery的.removeClass('.advanced_style_wide')删除该类，这将阻止问题中的规则影响