CODEWITHSUNDEEP
jquery
tree em
tree em

Reputation: 21701

add div , class and style with jquery on fly?

Here is my code (jquery)

var my_css_class = "{  position: absolute; top: 1400px;left: 40%;background-color: Menu;border: #f9f9f9;height: 200px;width: 300px; }";
this.popOut = function(msgtxt) {

      //filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
        this.overdiv = document.createElement("div");
        this.overdiv.className = "overdiv";
        /* I want to add style into class square?*/
        this.square = document.createElement("div");
        this.square.className = "square";        
         $('.square').css(my_css_class);/*<----*/
        this.square.Code = this;

        var msg = document.createElement("div");
        msg.className = "msg";
        msg.innerHTML = msgtxt;
        this.square.appendChild(msg);
        var closebtn = document.createElement("button");
        closebtn.onclick = function() {
            this.parentNode.Code.popIn();
        }
        closebtn.innerHTML = "Close";
        this.square.appendChild(closebtn);

        document.body.appendChild(this.overdiv);
        document.body.appendChild(this.square);
    }

I want to add style into class square?

             div.square { 
                 position: absolute;
                 top: 1400px;
                 left: 40%;
                 background-color: Menu;
                 border: #f9f9f9;
                 height: 200px;
                 width: 300px; 
                }

How can I do this?

Thanks

Upvotes: 1

Views: 103

Answers (5)

user3459357
user3459357

Reputation:

Declare your styles in a variable

var my_css_class = {  "position": "absolute",
                          "top": "1400px",
                          "left": "40%",
                      };

--> Inside your function assign those styles to your class

$('.square').css(my_css_class);

Upvotes: 1

Hoja
Hoja

Reputation: 1207

you can apply css an an object. So you can define your object in your javascript like this:

var my_css_class = {  "position": "absolute",
                      "top": "1400px",
                      "left": "40%",
                  };

And then you could use this like

$("#myelement").css(my_css_class);

It will be reusable too. Hope this help

In your example

$('.square').css(my_css_class);

Upvotes: 2

user4284772
user4284772

Reputation:

you can use this format for single css properties...

$('div.square').css('propertie','value'); // this is for only CSS propertie..

if you want to add multiple CSS properties at once. you have to pass an object as a parameter in css({}) like this

$('div.square').css({
    position: absolute;
    top: 1400px;
    left: 40%;
    background-color: Menu;
    border: #f9f9f9;
    height: 200px;
    width: 300px; 
});

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

$('.square').css({'width':'300px','background-color': Menu, ... });

Upvotes: 0

Playmaker
Playmaker

Reputation: 1456

You can use the following format to add styles to class using jQuery:

$('selector').css(propName, propValue)

Example:

$('div.square').css('position','absolute');

Repeat this for all the properties. It is also possible to add multiple props at once. Refer the following document for more.

http://api.jquery.com/css/#css-propertyName-function

Upvotes: 0

Related Questions