I am trying to work with altering a div tag's position and size with a JavaScript function and am confused about how to reference the current width of the div.
This is my function
function socialExt()
{
document.getElementById("Left").style.width = ("Left").width+240px;
}
I want it to add 240 pixels every time I click on the button.
("Left").width with in order to access its width so I can add 240px to it Assuming you consistently have a dimension at the end of your string, parseInt() will do the job for you.
function socialExt()
{
var el = document.getElementById("Left");
el.style.width = (parseInt(el.style.width, 10) + 240) + 'px';
}
Above we parse the value with a trailing px into an integer (you could also use floats), add 240 to it, and then coerce the number to a string as we append 'px' to it.
parseInt without a radix. This won't work unless an inline style is already setting the width (and if it is set to use something other than pixels, it will give undesired results).
No jquery needed for this. Little modification and it should work:
function socialExt() {
var el = document.getElementById("Left");
var width = parseInt(el.style.width);
el.style.width = (width + 240) + "px"
}
NaN as a result (since you can't add 240 to undefined). Alternatively, if the inline property is set already, it is likely to give you "240px240", which also isn't a valid value.
document.getElementById("Left").style.width = int(document.getElementById("Left").style.width.replace('px', '')) + 240 to fix the problem?undefined and if it is set that assumes it is set to a px value and even if it is, then it will try to set it to a number instead of a length which still isn't allowed.ReferenceError: int is not defined (and have all the problems from my previous comment)document.getElementById("Left").style.width = String(int(document.getElementById("Left").style.width.replace('px', '')) + 240) + 'px';Quick and dirty jQuery version:
$('#Left').width("+=240");
Edit for use case in comments
if ($('#Left').width() < 640) {
$('#Left').width("+=240");
}
Please check out the documentation for more information and examples.
Note that in my example above, it would be a bit more performant if you extracted $('#Left') out into a variable. This is more efficient b/c you only have to query the DOM once. This probably isn't something you need to be worrying about, but its good to know. Revised example below:
var el = $('#Left');
if (el.width() < 640) {
el.width("+=240");
}
With JQuery you can use:
var $element = $('#Left');
$element.width($element.width() + 240);
The JQuery .width() function returns an integer which represents the element's width in pixels. It also appears to work regardless of whether or not the width is explicitly set on the element. It also doesn't matter if the original width was specified in units other than pixels (for example, "20em").
This is one nice thing about using a library like JQuery, but it probably isn't enough of a reason to use it in this case. If, however, you are going to be adding a lot more JavaScript to your pages, you should consider using it.
$('#Left').width("+=240"); - a neat and undocumented(?) shorthand!
There can be these answers for this question.
First method would be the usage of JS. You are doing it a bit wrong. Since in the first place you are using the document.get... method to get the element so you will have to use the same thing to get the element again.
document.getElementById("Left").style.width =
(parseInt(document.getElementById("Left").width) + 240) + "px";
You can try jQuery:
http://jsfiddle.net/afzaal_ahmad_zeeshan/Tr223/1/
$('#div').width($('#div').width() + 240 + 'px'); // add 240 to the width
"240px240px" which isn't valid.element.style.width return string (the width of element in px). So the good way to solve your problem you need to parse width in integer then add 240 then finally add 'px' to your width like below
function socialExt()
{
var elem =document.getElementById("Left");
elem.style.width= parseInt(elem.style.width||0,10) + 240+'px'
}
you can check the fiddle here
Since you haven't stated what the initial status of the element is, it could be any one of the following:
So the first thing you must do is normalise this. You can do this using getComputedStyle, but since you are using jQuery (or have at least tagged it on the question), you can also just let it handle it for you.
var element = jQuery('#Left');
var initial_width = element.width();
This will give you the width in pixels expressed as a Number.
You can then add to this and set the width to the new value.
var desired_width = initial_width + 240;
element.width(desired_width);
Or in one line:
jQuery('#Left').width( jQuery('#Left').width() + 240 );
See a live demo
Or without jQuery:
var element = document.getElementById('Left');
var style = getComputedStyle(element, null);
var initial_width = style.width;
var initial_pixels = parseFloat(initial_width);
element.style.width = initial_pixels + 240 + "px";
See a live demo.
document.getElementById("Left").style.width += 240;.{on its own line) is problematic with javaScript in some edge cases. Its preferable to move it to the same linefunction socialExt() {pxin the value, your 1st suggestions will likely result inNaN.document.getElementById("Left").style.width = String(int(document.getElementById("Left").style.width.replace('px', '')) + 240) + 'px';