ansaurus

Question

Get button's width attribute value with jQuery in IE

Answer 1

+1 A:

UPDATE: Simplified and removed stuff about using DOM properties rather than attr().

Firstly, the width and height attributes of an input should be integers rather than length values; pixels are assumed.

Secondly, and this is what's causing the problem (as you can prove by changing the input type to "image"), width and height attributes are only appropriate and only affect rendering in the browser for inputs of type image. For buttons, you need to use CSS to change the dimensions.

Tim Down 2010-02-15 09:59:48

Disagree with your last point. tolism7 is trying to use jQuery, in which case $('buttonClass').attr('width') is perfectly valid.

James Wiseman 2010-02-15 10:03:51

I didn't say it wasn't valid. I just prefer using the built-in DOM property, which is what jQuery will be internally using, having been round the houses first.

Tim Down 2010-02-15 10:06:11

And actually, what does it mean to query the attribute or property of a set of different elements (which is what `$('.buttonClass')` creates)? Each element in the set could have a different value for that attribute/property.

Tim Down 2010-02-15 10:08:09

@Tim If you tried to answer the question instead of trying to prove that my saple code is wrong or stupid or whatever maybe I would get some usefull insite from you regarding the issue that I have found. The above code is not the actual code I use in my application. My actual code uses a .each statement to visit all elements that have such class assigned to them and pick their width attribute and inject it into their css style. Now if this good enough for you, could we please get into the question which is why IE fails to report the value of an input element's 'width' attribute using jQuery?

tolism7 2010-02-15 10:59:22

@tolism7: Have you ignored my first two points? I'd be surprised if they don't answer the question for you. I'm now regretting saying anything about using DOM properties instead of jQuery's `attr()`: that's really not the important bit of my answer. My comments were not meant as an attack on your code; I was trying to justify my position after James Wiseman's comment.

Tim Down 2010-02-15 11:27:59

@Tim Fair enough and I did not take it as an attack. I wanted to bring the focus to the questions and not how the code can be improved. The question is still valid though. Even if I remove the "px" from the value the issue still remains. The width is a valid attribute of the input element isn't it? If that is true then why can't I get its value ONLY on IE browsers? I can understand and agree with the point of using CSS instead. I do that already. The question is for my own personal curiosity. Why can't I read the value of the 'width' attribute in IE??

tolism7 2010-02-15 11:47:18

@tolism7: I've rewritten my answer and done a bit more testing. The important part is that height and width only apply to inputs of type "image".

Tim Down 2010-02-15 12:15:58

@Tim: I would like to continue the discussion if you don't mind. So, because the 'width' attribute is not a valid attribute of the 'input' element (i have checked w3.org already) IE choses to report 0 all the time when the value of this attribute is requested through Javascript. On the other hand though if you put any custom hence non valid attribute in the 'input' element like 'myattr' IE returns the value normally. (continued...)

tolism7 2010-02-15 13:54:34

@Tim: I can understand your point but I believe that yet again IE is the problem here because all other browsers assume that the 'width' attribute is a custom attribute when used in the 'input' element and report its value normally as IE does with any other custom attribute. Please try to understand that I do not try to style the control but I just try to read a value from a custom attribute that I thought 'width' would be a good name for it.

tolism7 2010-02-15 13:56:02

Aaah, now I understand. I would guess (with no proof) that in IE all inputs handle internally the same set of properties and attributes (including `width` since it exists in image inputs; I'd expect similar behaviour from, say, `src` or `checked` or `maxlength`) and in some way disable attributes that are not appropriate to the input's type while leaving unrecognised attributes untouched. In short, for custom attributes, you'd be best off using attribute names that are not used by any type of input.

Tim Down 2010-02-15 14:32:38

Answer 2

A:

Can you guarantee that .buttonClass is unique?

If you can then you're better selecting by ID anyway

James Wiseman 2010-02-15 10:05:34

ansaurus

tags:

views:

answers:

Get button's width attribute value with jQuery in IE

related questions