Manipulating a <div>'s position through JavaScript

Question

How do I set the top, left, width and height of a <div>? I already made sure it floats by inserting the following CSS code:

div.grid_tooltip {
    position: absolute;
    left: 0px;
    top: 0px;
}

Answer 1

jQuery:

$(".some_element").css({
    "width" : "100px",
    "height" : "200px" 
});

Answer 2

To easily get a reference to the element, you might want to add an id attribute to it, like id="Tooltip". Then you can get a reference and set the style properties:

var e = document.getElementById('Tooltip');
e.style.width = '100px';
e.style.height = '100px';

If you happen to use a library like jQuery you can find the element without an id, and set the style like this:

$('div.grid_tooltip').css({ width: '100px', height: '100px'});

It's still more efficient if the element has an id, then the library doesn't have to search through all div elements on the page to find it:

$('#Tooltip').css({ width: '100px', height: '100px'});