Get image width/height units in JavaScript

Question

I am creating an image object in JavaScript as

myImg = document.createElement('<img id=preview_image src="src/myImage.jpg" align="baseline" width="50%" height="80%"/>');

The image HTML will be obtained from database as in the given form. Now, how can I get the height and width with the units (i.e. 50% for width in this case)?

This will only work in IE8 and below. IE9 and other browsers don't support providing attributes in document.createElement(). You can only pass the element name. — detaylor
– detaylor, Commented Apr 27, 2011 at 13:35
then what would be the better way to create an image element, with the above HTML? — kashif
– kashif, Commented Apr 27, 2011 at 13:46
If you were able to you would create the element using the tag name and then setting attributes via properties. You can create elements from JS libraries including jQuery or Prototype, check out How do I create a new DOM element from an HTML string using built-in DOM methods or prototype — detaylor
– detaylor, Commented Apr 27, 2011 at 14:02
so, I'll be creating an IMG element and then parsing the HTML string to populate the respective IMG attributes, is there any better way? — kashif
– kashif, Commented Apr 27, 2011 at 15:07
The link shows another way, essentially creating a div, setting it's innerHTML and then using childNodes which will be the HTML content of the string. — detaylor
– detaylor, Commented Apr 27, 2011 at 15:16

Matt Ball · Accepted Answer · 2011-04-27 13:43:33Z

3

var width = myImg.width,   // width = '50%'
    height = myImg.height; // height = '80%'

// or
width = myImg.getAttribute('width'),
height = myImg.getAttribute('height');

edited Apr 27, 2011 at 13:43

answered Apr 27, 2011 at 13:31

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

3 Comments

Kumar Over a year ago

for any image object you can find it using above method.

kashif Over a year ago

i tried both even before posting the question, the only way to get the value is myImg.attributes['width'].ie8_value but this will make it IE8 specific, Can I have some way to do it for atleast some popular IEs (7,8 & 9)?

Matt Ball Over a year ago

@kashif: getAttribute('width') correctly returns '50%' in IE9 and Chrome 10. I'm not set up to test any other versions of IE, sorry. jsfiddle.net/mattball/xHDL7

TJHeuvel · Accepted Answer · 2011-04-27 13:31:30Z

0

As documented every DOMElement has a ClientHeight and ClientWidth property, those will have the values you need.

https://developer.mozilla.org/en/DOM/element

answered Apr 27, 2011 at 13:31

TJHeuvel

12.6k4 gold badges40 silver badges46 bronze badges

1 Comment

Matt Ball Over a year ago

clientHeight and clientWidth return pixel values, which is not what the OP wants.

Collectives™ on Stack Overflow

Get image width/height units in JavaScript

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related