jquery Element to DOM Element returns empty string by function

Question

Why does this code:

function fn(el){ return $(el)[0].style.width };
fn('#someElementIdId');  // return -> ""

But this code...

function fn(el){ return $(el).width() } ;
fn('#someElement');  // return -> correct width

I have tried different things, but all have the same result...

How can I make the first code work?

CODE HERE :: http://jsfiddle.net/A2VpH/18/

From the docs for .width(): Get the current computed width for the first element in the set of matched elements. .style.width gets the width set in the CSS. It is not the same. I suggest to have a look at the implementation of .width(). — Felix Kling
– Felix Kling, Commented Nov 21, 2011 at 14:37
Just a quick sanity check, fn('#someElementIdId'); and fn('#someElement'); reference different objects. In your code the ID's are the same? — David Brainer
– David Brainer, Commented Nov 21, 2011 at 14:38
".style.width gets the width set in the CSS".... sorry is incorrect ... note that css props. is setup here >> jsfiddle.net/A2VpH/18.... and dont works.... BUT if puts properties in TAGS like here >> jsfiddle.net/A2VpH/32 ..... ist's works..I THOUGHT SO.... — Servius
– Servius, Commented Nov 21, 2011 at 19:51

Esailija · Accepted Answer · 2011-11-21 15:44:24Z

1

Yes, is there, and don't works... Any DOM's property properly set up ... don't works. Make a REAL test for yourself

Here's a test showing jQuery vs regular DOM: http://jsfiddle.net/A2VpH/3/

Works fine for me.

edited Nov 21, 2011 at 15:44

answered Nov 21, 2011 at 15:08

Esailija

140k24 gold badges280 silver badges328 bronze badges

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

8 Comments

Servius Over a year ago

Esailija.... thank you for your effort... But how make works that CODE .... the properties is there in CSS.... You don't call $("element")[0].DOM_any_property INSIDE a function, you set up OUTSIDE... is right ??

Esailija Over a year ago

@Servius, I am sorry I cannot understand what are you saying. :( It doesn't make any difference whether you do it inside function. .style.width returns "" because there is no style attribute set. You have to use getComputedStyle or currentStyle to get the real style that could be from CSS..

Esailija Over a year ago

@Servius, I have updated to show that even jQuery returns "" when you try to get the style property. jsfiddle.net/A2VpH/1

Esailija Over a year ago

@Servius, jsfiddle.net/A2VpH/6. You were missing a return statement, as you can see it returns now an empty string, not undefined.. It is empty because it does entirely different thing than .width() which is demonstrated in my answer.

Servius Over a year ago

Here... sorry a forgot the return... jsfiddle.net/A2VpH/12.... but this dont care... dont works !!! return a empty string...

|

Pointy · Accepted Answer · 2011-11-21 14:44:32Z

0

The "style" attribute does not contain all the style information for an element. It's just the stuff that's there directly in the tag, like:

<div style='width: 100px'>

If the width comes from CSS, it won't be there.

answered Nov 21, 2011 at 14:44

Pointy

415k62 gold badges600 silver badges631 bronze badges

1 Comment

Servius Over a year ago

Sorry, you're right, I saw at a glance, I thought you was referring to the CSS, not the tag

David Brainer · Accepted Answer · 2011-11-21 17:07:42Z

0

You can use offsetWidth, clientWidth, or a currentStyle/getComputedStyle hybrid depending on your browser:

HTML

<div id="someElementIdId"></div>

CSS

div {
 width: 200px;
  padding: 20px;
  margin: 20px;
   border: 5px solid black; 
}

Javascript

function getStyle(x,styleProp)
{
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

function fn1(el){ return $(el)[0].currentStyle.width; };

function fn2(el){ return $(el).width(); };

function fn3(el){ return getStyle($(el)[0],'width').replace('px', ''); };

function fn4(el){ return $(el)[0].offsetWidth; };

function fn5(el){ return $(el)[0].clientWidth; };

alert( fn3('#someElementIdId') );

Note that offsetWidth will include the padding, scrollBar, and the border. If you want width + padding you can use clientWidth.

It also might help to know why you want to do this? If you are going to be using jQuery to find the element in the DOM why not use the jQuery width() function as well?

http://jsfiddle.net/A2VpH/24/

edited Nov 21, 2011 at 17:07

answered Nov 21, 2011 at 14:39

David Brainer

6,3513 gold badges21 silver badges16 bronze badges

3 Comments

Esailija Over a year ago

.width() doesn't include padding or border, offsetWidth includes both padding and border.

Servius Over a year ago

"It also might help to know why you want to do this? If you are going to be using jQuery to find the element in the DOM why not use the jQuery width() function as well?"...........:: Besides the the behavior javascript confused me ....Cos i hates read properties in parenthesis, what is more readable ? el[0].style.width = 300 ...............or......... el.width( "300") ...?.... matter of aesthetics...

Servius Over a year ago

David... thank you... and sorry... i don't saw your answer before... it's correct .... i was entertained with Esailija.... THE MESS is because getComputedStyle is different to "css style", depending to context........... ::: read the final comment above

Collectives™ on Stack Overflow

jquery Element to DOM Element returns empty string by function

3 Answers 3

8 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related