How to dynamically add a CSS class and implement its style in JavaScript

Question

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.

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.

possible duplicate of Change an element's class with JavaScript — suvroc
– suvroc, Commented Sep 1, 2015 at 9:55
Do you have to reinvent the wheel? Why not use use a framework? — Mithrandir
– Mithrandir, Commented Sep 1, 2015 at 9:58
Sir/ma'am i'm sorry but like i said i'm new to this could you please elaborate, a frame work how?. — moor
– moor, Commented Sep 1, 2015 at 10:03
If you want to add style properties dynamically, just create a class with those properties in your css file. Then dynamically change the class name alone. — Vamsi Krishna
– Vamsi Krishna, Commented Sep 1, 2015 at 10:03
possible duplicate of add css rule via jquery for future created elements — nwellnhof
– nwellnhof, Commented Sep 1, 2015 at 10:06

cнŝdk · Accepted Answer · 2015-09-01 11:37:49Z

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

edited Sep 1, 2015 at 11:37

answered Sep 1, 2015 at 10:32

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

moor Over a year ago

"#element_to_pop_up" is a div element that i also gets created dynamically on a double click even and "b-close" is a class of the "#element_to_pop_up". so my my question is i don't understand why you had to creat this element:var styleSheet = document.createElement("style");, instead of appending "text'' to styl.

cнŝdk Over a year ago

@moor If you want to apply style to an element you have two ways either give it this style directly or give it a syle class(like in our case), and to give it a class of style this class should be present in the <style> tag in your document, that's the only reason I created this style element and put it in the head of the page.

cнŝdk Over a year ago

Great, glad it helps :) .

Jay Buckman Over a year ago

This appears to work in IE, Chrome, Firefox, and IE 11 without creating the textnode - you can just set the .text property of the style element.

Jay Buckman Over a year ago

Bleep. I got this backwards. You can add script using .text. For styles, you need to create the textnode.

|

cнŝdk · Accepted Answer · 2015-09-01 10:52:07Z

1

Use jquery insted on javascript.

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

edited Sep 1, 2015 at 10:52

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

answered Sep 1, 2015 at 10:10

Hossein Badrnezhad

5121 gold badge6 silver badges21 bronze badges

Comments

Mehdi Brillaud · Accepted Answer · 2015-09-01 10:10:59Z

0

You can just add a CSS class (and style it in your stylesheet instead of your 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 :

$(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>

answered Sep 1, 2015 at 10:10

Mehdi Brillaud

1,8662 gold badges14 silver badges23 bronze badges

1 Comment

moor Over a year ago

I just want to implement the class "b-close" that i have just added inside this function. reason being i want to pass the "right" and "top" values from the mouse click inside this function and pass those values to the "b-close" style properties.

Collectives™ on Stack Overflow

How to dynamically add a CSS class and implement its style in JavaScript

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related