首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用jquery删除样式标记中的#idname .classname {}?

如何使用jquery删除样式标记中的#idname .classname {}?
EN

Stack Overflow用户
提问于 2018-07-24 20:38:18
回答 2查看 208关注 0票数 0

不太清楚该怎么说,但是下面是我正在使用的CSS代码。

代码语言:javascript
运行
复制
<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调用整个过程呢?如何在jquery代码的'.className'部分中引用所有这些?我想从无法在内部修改或编辑的文档中删除这段代码。我只能添加到现有代码中。我对jquery的工作方式非常陌生。谢谢!

EN

回答 2

Stack Overflow用户

发布于 2018-07-24 20:44:46

下面是一种添加和删除类的简单方法&使用jQuery的ID

代码语言:javascript
运行
复制
$('.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');
});
代码语言:javascript
运行
复制
.box {
  display: block;
  width: 100px;
  height: 100px;
  background-color: red;
}

.blue {
  background-color: blue;
}

#yellow {
  background-color: yellow;
}
代码语言:javascript
运行
复制
<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实例

票数 0
EN

Stack Overflow用户

发布于 2018-07-24 23:02:30

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

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

代码语言:javascript
运行
复制
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>'));

反斜杠\只用于增加代码可读性。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51507167

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档