动态地将属性添加到 css 类而不是元素

Question

我最近遇到了这种情况，我想将 css 属性添加到类而不是元素中。

当我这样做时

    $('.class_with_css').css({display:'none'});

它将样式 "display:none" 添加到当前具有类 "class_with_css" 的所有元素中。 但就我而言，在执行上述代码后，我必须将"class_with_css" 类应用于新元素，并希望保留这种样式添加。有没有办法在不调用上述函数的情况下做到这一点（例如将属性添加到 css 类本身）？

例如。

1. 两个元素

    <div id=1 class="abc" ></div>
    <div id=2 class="abc" ></div>

1. 运行代码

    $('.abc').css({display:'none'});

1. 元素变为：

    <div id=1 class="abc" style="display: none;"  ></div>
    <div id=2 class="abc" style="display: none;" ></div>

4. 现在我将类 abc 添加到这样的元素中

    <div id=3 class="abc" ></div>

有没有办法让“abc”类保存样式而不是元素，这样第 4 步的元素也有display:none

Answer 1

不，没有办法直接实现你想要的。通常是通过已经拥有具有所需更改/属性的 css 类并应用该类而不是 css 属性来完成的。

因此，您将拥有例如：

.hide {
    display: none
}

并将类添加到元素中：

$('.abc').addClass('hide');

更新
如果您真的想动态添加 css 类，另一种选择是发布here

的答案

Answer 2

您可以在标题中注入样式。

但请记住从那时起。您必须使用display: block; 来显示它。否则默认样式将是display: none;，直到您刷新页面。

Inject() 将样式注入到您的标题中

Add() 正在将“abc”类添加到您的其他 div 中

Showme() 正在将“display: block”添加到“.abc”

Hideme() 正在将“display: none”添加到“.abc”

function Inject(){
  $('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
  $("#w").addClass("abc");
  $("#z").addClass("abc");
}
function Showme() {
 $(".abc").css("display","block");
}
function Hideme() {
 $(".abc").css("display","none");
}

button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>