78.5k How to Add Multiple Image to P

55.2k How to retain the selected val

48.7k How to Add and Remove items in

43.0k How to Detect if an app is ins

36.8k Showing a Popup Window Using M

33.7k List of Top 7 JavaScript Frame

prev 1 2 3 … 254 next

How to get style information for an element with javascript?

almost 9 years ago

0
0
Positive Vote
0
Negative Vote
0
Save Favourite
0
0
0
0
198

Comment on it

Hello readers, in this tutorial we will learn about how to get style information for an element and set element style with one or more CSS.

Whenever you need to get information about style which is inline or via javascript and also need to know directly about the element style property. we use :-

Syntax:-

copytext

var width = elem.style.width;

var width = elem.style.width;

If you need to know about the information of the existing style of the particular element, we use the function :-

copytext

function getStyle(elem, cssprop, cssprop2){
    // IE
    if (elem.currentStyle) {
        return elem.currentStyle[cssprop];
        // other browsers
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
        return document.defaultView.getComputedStyle(elem, null).getPropertyValue(cssprop2);
        // fallback
    } else {
        return null;
    }
}
window.onload=function() {
    // setting and accessing style properties
    var elem = document.getElementById("elem");
    var color = getStyle(elem,"backgroundColor", "background-color");
    alert(color); // rgb(0,255,0)
}

function getStyle(elem, cssprop, cssprop2){
    // IE
    if (elem.currentStyle) {
        return elem.currentStyle[cssprop];
        // other browsers
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
        return document.defaultView.getComputedStyle(elem, null).getPropertyValue(cssprop2);
        // fallback
    } else {
        return null;
    }
}
window.onload=function() {
    // setting and accessing style properties
    var elem = document.getElementById("elem");
    var color = getStyle(elem,"backgroundColor", "background-color");
    alert(color); // rgb(0,255,0)
}

Every web page element has their own property and methods. One of the properties of the element is that the style object, it represent the CSS style for that particular element. There are many ways to know the style information. First is, you can access directly to the object style, by using the dot notation which is mainly used to access the object properties and methods:

Syntax:-

copytext

var elem = document.getElementById("elem");
var width = elem.style.width;

var elem = document.getElementById("elem");
var width = elem.style.width;

With this approach, you can get and set the style setting inline or dynamically but there is a special syntax to use this.

Syntax:-

copytext

var width = elem.style.width;

var width = elem.style.width;

Use the Camel-Case when you have the property which is using with hyphens such are like background-color:-

Syntax:-

copytext

var bkcolor = elem.style.backgroundColor;

var bkcolor = elem.style.backgroundColor;

While if you use property with hyphen it doesn't work, because javascript interact with hyphen as a subtraction operator.

The next approach of accessing the style is the method of "getAttribute" to get the style object:-

Syntax:-

copytext

var style = elem.getAttribute("style");

var style = elem.getAttribute("style");

However, you would then have to resolve into its component parts the values comes out of the string. It is better you can just access directly the values on the style property.

How to get style information for an element with javascript?

0 Comment(s)

Comment on it

Unable to start Java!! Mr. Nerd figure out why..

Positive Votes

Negative Votes

Delete Comment

Post Projects

Manage Company