If you have the following element:

<span style="width:100px"></span>

and the css is:

span {width:50px!important;}

Is there a way I can get the inline-style value and ignore the css value?

Thanks

If you have the following element:

<span style="width:100px"></span>

and the css is:

span {width:50px!important;}

Is there a way I can get the inline-style value and ignore the css value?

Thanks

• javascript
• jquery

• no as long as you have !important.. – Dipesh Parmar Commented Oct 2, 2013 at 12:27
• You are probably going to need display:inline-block to use width with an inline element. – fred02138 Commented Oct 2, 2013 at 12:30

2 Answers 2

use element.style.width

sample:

$(function(){
    alert($("span")[0].style.width);
});

To find the applied style:

var span = document.querySelector('span[style]'),
    actualWidth = window.getComputedStyle(span, null).width;

Note that this gets the style which won, which in this case will be the one with the !important modifier. If you must instead try and retrieve the in-line style, regardless of whether it was applied or not, you can simply use the style object of the element node:

inlineWidth = span.style.width;

JS Fiddle demo.

Do remember that, for width to be applied to a span element, it must be either display: block or display: inline-block.