1

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.

cнŝdk
  • 31,391
  • 7
  • 56
  • 78
moor
  • 35
  • 5
  • possible duplicate of [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) – suvroc Sep 01 '15 at 09:55
  • Do you have to reinvent the wheel? Why not use use a framework? – Mithrandir Sep 01 '15 at 09: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 Sep 01 '15 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 Sep 01 '15 at 10:03
  • possible duplicate of [add css rule via jquery for future created elements](http://stackoverflow.com/questions/13075920/add-css-rule-via-jquery-for-future-created-elements) – nwellnhof Sep 01 '15 at 10:06
  • `styl.classname` is `undefined`? here - styl.className = **styl.className** + "b-close"; – Rohit Kumar Sep 01 '15 at 10:07
  • The fundamental reason why i want implement the style properties inside this javascript function is because this function will later receive those style values as parameters form a user input. – moor Sep 01 '15 at 10:10
  • @moor can you please upvote [my answer](https://stackoverflow.com/questions/32328623/how-to-dynamically-add-a-css-class-and-implement-its-style-in-javascript/32329374#32329374) it will be much helpful. – cнŝdk Jun 27 '17 at 21:48

3 Answers3

1

Use jquery insted on javascript.

$(selector).css("width":"100%").css("height","100px");
cнŝdk
  • 31,391
  • 7
  • 56
  • 78
Hossein Badrnezhad
  • 424
  • 1
  • 6
  • 18
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";
    }
cнŝdk
  • 31,391
  • 7
  • 56
  • 78
  • "#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. – moor Sep 01 '15 at 11:13
  • @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 – cнŝdk Sep 01 '15 at 11:16
  • Great, glad it helps :) . – cнŝdk Sep 01 '15 at 13:09
  • 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 Jun 27 '17 at 19:13
  • 1
    Bleep. I got this backwards. You can add script using .text. For styles, you need to create the textnode. – Jay Buckman Jun 27 '17 at 19:30
  • @JayBuckman yes we need to create the node to apply the style. – cнŝdk Jun 27 '17 at 21:47
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>
Mehdi Brillaud
  • 1,846
  • 2
  • 13
  • 22
  • 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. – moor Sep 01 '15 at 10:20