It is possible to load a CSS class into a Javascript/Jquery variable?

Question

Im new in javascript/Jquery and I was wondering if is possible to load an existing css class into a variable to use it later.

Example:

/* CSS */
.view {
    position: absolute;
    height: 214px;
    width:1964px;
    padding:2px;
}

And in a javascript File load into a variable to use it like this:

//Javascript
var view = load(".view");

view.width // I get 1964px
view.height // I get 214px

Thanks.

Answer 1

I'm not sure why you would do this unless you are amending HTML elements, but could you use getComputedStyle ? Please note I am using good old JS here not jQuery...

/* CSS */
    .view {
        position: absolute;
        height: 214px;
        width:1964px;
        padding:2px;
    }

and in your JS

    //Javascript
    window.onload = function () { 

    var view = document.querySelector('.view'),
        styles = getComputedStyle(view);

    console.log(styles.width); 
    console.log(styles.height);
   }

More info here

I haven't tested this but this is how I would go about it...

Answer 2

You have to use the jQuery like this:

var view = $('.view');

Then you can iterate over all elements with the class view. Do it by:

$.each(view, function(){
    // then you can get all the width and height elements
    // to use them, put them in an object or in an array
})