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

Hi I'm new to JavaScript and CSS and I would like to create a JavaScript function that dynamically applies the style properties that are defined inside this function to a specific element.

嗨,我是JavaScript和CSS的新手,我想创建一个JavaScript函数,动态地将此函数中定义的样式属性应用于特定元素。

Please check my code below, I have managed to create the element and add the class to that element but I'm struggling to implement the style properties inside this function.

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

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;
   //}
}

Please any help will be highly appreciated.

如有任何帮助,将不胜感激。

3 个解决方案

#1

If you want to add a style class to your page and write its style content, you should create it first then put it in a <style> tag, so you can use it later.

如果要为页面添加样式类并编写其样式内容,则应首先创建它,然后将其放在

This is your way to go:

这是你要走的路:

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";

}

<div onclick="highlight()" id="element_to_pop_up">bla bla bla</div>

Create a Style Sheet Element.

创建样式表元素。

Put the style on it.

把风格放在上面。

Append it to the head of the document.

将其附加到文档的头部。

Use this style or apply it to element.

使用此样式或将其应用于元素。

EDIT:

If you will pass the style top and right values as parameters to the function just do the following:

如果您将样式顶部和右侧值作为参数传递给函数,请执行以下操作:

    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";
    }

#2

Use jquery insted on javascript.

使用jquery insted javascript。

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

#3

You can just add a CSS class (and style it in your stylesheet instead of your javascript).

你可以添加一个CSS类(并在样式表中设置样式而不是你的javascript)。

Here is an example (there are multiple way to do it but I don't know what your try to achieve exactly) :

这是一个例子(有多种方法可以做到,但我不知道你想要达到的目的):

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>

Edit: If you want to use jQuery, it's even simpler :

编辑:如果你想使用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>

#1