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>

当一段样式代码使用多个ID时，我该如何使用jQuery $（'。className'）。removeClass（'className'）; 调用整个程序。类？如何在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 example

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')删除该类，这应阻止规则影响您的问题

如何使用jquery在样式标签中删除#idname .classname {}？

2 个答案: