Access HTML style attribute with JS

Question

How do I get a CSS property from the style attribute of an HTML element (and ignore the stylesheet/computed properties)?

E.g:

<div style="float:left"></div>

function getStyle(element, name) { ... }
getStyle(element, 'float') === 'left';
getStyle(element, 'font-weight') === null;

I don't mind either raw JS or jQuery.

Be careful about what you ask for. HTML attributes and DOM properties are different things, though HTML5 tries to make them reflect each other, they do not in all cases in all browsers. For a long time, Firefox treated attributes and properties as two separate things, IE treated them as essentially the same thing (probably why HTML5 tries to take a middle path, more or less). They are not consistent yet. — RobG
– RobG, Commented Nov 27, 2012 at 4:46

Akhil Sekharan · Accepted Answer · 2012-11-27 04:40:24Z

2

If you want pure JS, This example:

element.style.display = 'none';

answered Nov 27, 2012 at 4:40

Akhil Sekharan

12.7k8 gold badges43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Petah Over a year ago

Seems to work, Ill do some more testing before I accept the answer.

maček · Accepted Answer · 2012-11-27 05:01:14Z

Does this not work for you?

$('div').attr('style');

If you want to parse this further:

var getStyles = function(element) {

    // ensure element has style
    if (! element.attr('style')) {
        return {};
    }

    // init styles
    var styles = {}

    // parse style attr
    $.each(element.attr('style').split(/\s*;\s*/), function(i,style) {
        if (style.length) { // a style string ending in ; will cause an empty pair after splitting
            pair = style.split(/\s*:\s*/);
            styles[pair[0]] = pair[1];
        }
    });

    return styles;
};

A couple tests

// test an element with style attr
var element = $('<div style="float:left"></div>');
console.log(getStyles(element)); //=> {float: "left"}
console.log(getStyles(element).float); //=> left
console.log(getStyles(element).hello); //=> undefined

// test some element without style attr
var element2 = $('<p>hello</p>');
console.log(getStyles(element2).float); //=> undefined
console.log(getStyles(element2).hello); //=> undefined

// a bit more complex
var element3 = $('<div style="float:left; background-color:red; color:#555; opacity: 0.5 !important;"></div>');
console.log(getStyles(element3)); //=> {float: "left", opacity: "0.5 !important", background-color: "red", color: "#555"} 
console.log(getStyles(element3).float); //=> left
console.log(getStyles(element3).opacity) //=> 0.5 !important;
console.log(getStyles(element3)["background-color"]); //=> red

See it working on jsFiddle

Alexandre Lavoie · Accepted Answer · 2012-11-27 04:38:47Z

0

You can use

var floating = $('div').css('float');
$('div').css('float','left');

To access each styling parameters with jQuery.

answered Nov 27, 2012 at 4:38

Alexandre Lavoie

8,7993 gold badges33 silver badges73 bronze badges

2 Comments

Petah Over a year ago

This will return the style-sheet inherited value, and/or the computed value. Which is not what I am after.

Alexandre Lavoie Over a year ago

Ok now I see the difference, sorry!

Talha · Accepted Answer · 2012-11-27 04:44:50Z

0

you can also access via prop() function

$('div').prop('style');

answered Nov 27, 2012 at 4:44

Talha

19.3k8 gold badges53 silver badges66 bronze badges

Comments

Karan · Accepted Answer · 2012-11-27 05:33:43Z

0

Here's a quick improvement on macek's code.

This function is in the format asked by Petah. Plus, this function breaks as soon as it finds a match, hence eliminating the need to scan the entire "style" attribute.

function getStyle(element, name) {

if (! element.attr('style')) {
    return {};
}
var result= "";

$.each(element.attr('style').split(/\s*;\s*/), function(i,style) {
    if (style.length) { 
        pair = style.split(/\s*:\s*/);
        if(pair[0] == name) {
            result = pair[1];
            return false;
        }
    }
});

return result;
};

Js Fiddle for examples on usage : http://jsfiddle.net/rxpMJ/2/

answered Nov 27, 2012 at 5:33

Karan

363 bronze badges

Collectives™ on Stack Overflow

Access HTML style attribute with JS

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related