使用Javascript从具有属性选择器的CSS类更改属性的状态

Question

我有以下HTML行：

<div id="content" class="slide" data-position="left" ></div>

这个带有[attribute]选择器的CSS类：

.slide[data-position="left"] {
    display: none;
}

我想做的是单击一个按钮后，css类将使用Java脚本进行更改，如下所示

.slide[data-position="left"] {
    display: block;
}

我尝试了其他方法，例如在HTML行中添加新类或添加内联style =“ display：block;”。 使用Javascript：

$(".slide").attr('data-position', 'left').css({'display':'block'});

产生

<div id="content" class="slide" data-position="left" style="display: block;"></div>

但是.css（）方法根本没有帮助我，因为我想更改/覆盖.slide [data-position =“ left”]。 内联不会更改CSS样式表中的任何内容。

我想知道如何更改具有特定[attribute]选择器的特定CSS类的属性状态。

我试图用谷歌搜索这个问题，但是似乎没有人对此有答案。

有任何想法吗？

谢谢！

Answer 1

除了直接更改CSS规则，您还可以为元素提供与另一个规则相对应的另一个类：

.slide.active { display: block; }

或者，如果属性仍然具有重要性：

.slide.active[data-position="left"] { display: block; }

该规则应遵循现有规则，以确保也显示“ active”类的“ slide”元素。

您可以使用以下方式在JavaScript中添加该类：

$("#content").addClass("active");

Answer 2

您可以通过更改jQuery选择器来实现。 目前，您正在使用jQuery的attr方法来定位data-position属性并将其值设置为left。 相反，您需要使用以前在CSS声明中使用的相同属性选择器： .slide[data-position=left]

您需要做的是更改此：

$(".slide").attr('data-position', 'left').css({'display':'block'});

对此：

$(".slide[data-position=left]").css({'display':'block'});

完整的jQuery如下所示：

$("#clickMe").on("click",function(){

    $(".slide[data-position=left]").css({'display':'block'});

});

演示版