CODEWITHSUNDEEP
javascriptcss
moor
moor

Reputation: 35

How to dynamically add a CSS class and implement its style in 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.

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.

Upvotes: 1

Views: 589

Answers (3)

cнŝdk
cнŝdk

Reputation: 32145

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

Upvotes: 1

Hossein Badrnezhad
Hossein Badrnezhad

Reputation: 502

Use jquery insted on javascript.

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

Upvotes: 1

Mehdi Brillaud
Mehdi Brillaud

Reputation: 1866

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>

Upvotes: 0

Related Questions