如何在 JavaScript 中动态添加 CSS 类并实现其样式答案

【问题标题】：How to dynamically add a CSS class and implement its style in JavaScript如何在 JavaScript 中动态添加 CSS 类并实现其样式
【发布时间】：2023-03-15 08:38:01
【问题描述】：

您好，我是JavaScript 和CSS 的新手，我想创建一个JavaScript 函数，将在该函数中定义的样式属性动态应用到特定元素。

请检查下面的代码，我已经设法创建了元素并将类添加到该元素，但我正在努力在此函数中实现样式属性。

function highlight(){
    var styl = document.querySelector("#element_to_pop_up");
    styl.style.cssText = " background-color:#fff;border-radius:15px;    color:#000;display:none;padding:20px;min-width:30%;min-height: 30%;max-width:40%; max-height: 40%;";
    styl.className = styl.className + "b-close";
    //.b-close{
        //cursor:pointer;
        //position:absolute;
        //right:10px;
        //top:5px;
   //}
}

任何帮助将不胜感激。

【问题讨论】：

Change an element's class with JavaScript 的可能重复项
你必须重新发明轮子吗？为什么不使用框架？
先生/女士，我很抱歉，但就像我说的我是新手，请您详细说明一下，框架工作如何？。
如果您想动态添加样式属性，只需在您的 css 文件中创建一个包含这些属性的类。然后单独动态更改类名。
add css rule via jquery for future created elements的可能重复

标签： javascript css

【解决方案1】：

如果你想在你的页面中添加一个样式类并编写它的样式内容，你应该先创建它，然后把它放在一个<style>标签中，这样你以后可以使用它。

这是你要走的路：

function highlight() {
  var styl = document.querySelector("#element_to_pop_up");

  //Create StyleSheet
  var styleSheet = document.createElement("style");
  var text = document.createTextNode("\n.b-close {\n cursor:pointer;\n  position:absolute;\n right:10px;\n top:5px;\n}");

  //Put the style on it.
  styleSheet.appendChild(text);

  //Append it to <head>
  document.head.appendChild(styleSheet);
  //Apply it
  styl.className = styl.className + " b-close";

}

&lt;div onclick="highlight()" id="element_to_pop_up"&gt;bla bla bla&lt;/div&gt;

创建样式表元素。
把样式放在上面。
将其附加到文档的开头。
使用此样式或将其应用于元素。

编辑：

如果您要将样式 top 和 right 值作为参数传递给函数，只需执行以下操作：

    function highlight(right, top) {
      var styl = document.querySelector("#element_to_pop_up");
      var styleSheet = document.createElement("style");
      var text = document.createTextNode("\n.b-close {\n cursor:pointer;\n  position:absolute;\n right: "+right+"px;\n top: "+top+"px;\n}");
      styleSheet.appendChild(text);
      document.head.appendChild(styleSheet);
      styl.className = styl.className + " b-close";
    }

【讨论】：

"#element_to_pop_up" 是一个 div 元素，我什至在双击时也会动态创建它，"b-close" 是 "#element_to_pop_up" 的一个类。所以我的问题是我不明白为什么你必须创建这个元素：var styleSheet = document.createElement("style");，而不是将“text”附加到 styl。
@moor 如果你想给一个元素应用样式，你有两种方法，要么直接给它这个样式，要么给它一个样式类（就像我们的例子一样），然后给它一个样式类这个类应该出现在文档的
太好了，很高兴它有帮助:)。
这似乎可以在 IE、Chrome、Firefox 和 IE 11 中工作而无需创建文本节点 - 您只需设置样式元素的 .text 属性即可。
哔哔声。我把这个弄反了。您可以使用 .text 添加脚本。对于样式，您需要创建文本节点。

【解决方案2】：

在 javascript 上使用 jquery。

$(selector).css("width":"100%").css("height","100px");

【讨论】：

【解决方案3】：

您可以只添加一个 CSS 类（并在样式表中而不是在您的 javascript 中设置它的样式）。

这是一个例子（有多种方法可以做到，但我不知道你到底想达到什么目标）：

function highlight(){
  var target = document.getElementById("header");
  target.className = target.className + " highlighted";

}

var btn = document.getElementById('add-class');

btn.addEventListener('click', highlight);

.highlighted {
  /*Your CSS*/
  background-color: red;
}

<h1 id="header">Lorem</h1>

<button id="add-class">Click me</button>

编辑：如果你想使用 jQuery，那就更简单了：

$(document).ready(function() {
   $('#add-class').on('click', function() {
     $('#header').toggleClass('highlighted');
   });
});

.highlighted {
  /*Your CSS*/
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="header">Lorem</h1>

<button id="add-class">Click me</button>

【讨论】：

我只想实现我刚刚在这个函数中添加的类“b-close”。原因是我想在此函数内通过鼠标单击传递“右”和“顶部”值，并将这些值传递给“b-close”样式属性。