Using Javascript to add width to a HTML element

Question

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.

• What should I replace ("Left").width with in order to access its width so I can add 240px to it
• I am also currently not using JQuery, should I use it?

Answer 1

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.

Answer 2

With JQuery you can use:

var $element = $('#Left');
$element.width($element.width() + 240);

Demo on jsfiddle

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.

Answer 3

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");
}

Answer 4

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"
}

Answer 5

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

Answer 6

Since you haven't stated what the initial status of the element is, it could be any one of the following:

• No width specified
• A width specified in pixels (the unit you want to modify it with)
• A width specified in some other unit

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 .

Answer 7

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