getAttribute() width + height problems

JavaScript
1

Hey all,

I am trying to get the height and width out of an image… like such…

var height = document.getElementsByTagName(‘img’).item(0).getAttribute(‘height’);
var width = document.getElementsByTagName(‘img’).item(0).getAttribute(‘width’);

That works great, now, what i want to do is resize my popup window to the size of the dimentions of that image but I want then to add 50 px around the edge of the image IE:

var height = (document.getElementsByTagName(‘img’).item(0).getAttribute(‘height’)+50);
var width = (document.getElementsByTagName(‘img’).item(0).getAttribute(‘width’)+50);

The problem I am being faced with here is that example I have a height of 300 and a width of 500 my totals in the Javascript now become 30050 and 50050 respectively, but I want it to end up as 350 and 550, how would I fix this problem?

Thanks in advance
Ox

2

var height = (document.getElementsByTagName(‘img’).item(0).getAttribute(‘height’)-0+50);
var width = (document.getElementsByTagName(‘img’).item(0).getAttribute(‘width’)-0+50);

3

fantastic! Easy when you know how such a small thing, Jimfraser I know im sounding like a pest but I know now that is works! but I dont understand [b]WHY?

[/b]Not that I am moaning that it works, I just like to understand why :slight_smile:

4

Javascript uses the same operator + for addition and sting concatenation. If one of the operands has (or can be converted to) a string type, result is concatenation:

“50” + 1 is “501”

If both are (or are converted to) numbers, result is addition:

50 + 1 = 51

“-0” does string-to-number conversion and therefore forces engine to perform addition:

(“50” - 0) + 1 = 51

However, this trick (and the same like *1 etc) is considered “bad style”. It’s much cleaner to make an explicit cast:

Number(“50”) + 1 = 51

As to your snippet, you should realize that “getAttribute” simply returns what you’ve put in html code and generally doesn’t reflect the real width of an object:


<img
	style="width:100px"
	width="foo"
	border=1
	onclick="alert(
		'\
attribute=' + this.getAttribute('width') +
		'\
real width=' + this.offsetWidth
		)
	"
>

To find real pixel dimensions of an element use “offsetWidth/height” property :


var img = document.getElementsByTagName('img').item(0);
var width = img.offsetWidth + 50;
var height = img.offsetHeight + 50;

Note that no type conversion is needed here, because offsetXXX are numbers, not strings.

5

stereofrog, thank you very much for the reply, that makes alot of sence! excellent, thanks again!

6

“-0” does string-to-number conversion and therefore forces engine to perform addition:

(“50” - 0) + 1 = 51

However, this trick (and the same like *1 etc) is considered “bad style”.

The plus sign is problematic because it can represent addition of two numbers or ‘concatenating’ (joining) two strings. So, when javascript sees this:

“100” + 50

it doesn’t know whether it should be adding two numbers or joining two strings, so by default, when it sees a number and a string, js automatically converts 50 to a string and then joins the two strings.

In js, all values from input fields and attributes are strings–even if they look like numbers. So, what you are doing in your code in this line:

getAttribute(‘height’)+50)

is this:

“27” + 50

and by default javascript converts 50 to a string and joins the two strings.

However, there is no subtraction operator for strings, so when js sees a subtraction operator:

“100” - 50

the only logical conclusion is that you are trying to subtract two numbers, so js converts the string to a number, and performs the subtraction. So, to convert a string to a number, you can subtract 0 from it.

(“100” - 0) + 50

Similarly, you can convert a string to a number by multiplying by 1:

(“100” * 1) + 50

However, it is not always clear what you are doing, so it’s better style to use parseInt(), parseFloat() or Number() to convert the string to a number. parseInt() and parseFloat() will try convert a string to number if it has trailing letters:

parseInt(“123abc”) //123

but will return NaN if there are leading letters:

pareseInt(“abc123”) //NaN

Number() returns NaN if there are any letters in the string. So, depending on what behaviour you want, you can use the appropriate function. In addition, it may prove useful to be able to test if the conversion to a number worked, and you have to use isNaN() for that:

var value=document.getElementById(“someId”).value;
var result = Number(value);
if(isNaN(result)) alert(“not a number–bad input”)