Change Div Style Elements Onclick Question

theflyingminstr

07-20-2009, 06:01 PM

Hi I want to know if it's possible to change a div's width, height as well as left/right position at the same time.

Since I want to change many different divs very precisely I also wanted to know if the onclick function can be nested in the link itself (even though the script example I'm pasting below show's it as function).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body>

<div id="857" style="position:absolute; top:265px; left:345px; width: 62px; height: 83px;">
<img src="images/image1.jpg" width="100%" height="100%" />
</div>

<br/><br/>

<a href="#" onclick="function('change')">Change Width Height & Position</a>

</body>

</html>

Thanks so much

ckeyrouz

07-20-2009, 06:19 PM

yes sure you can:

function changeStyle()
{
var obj = document.getElementById("857");
obj.style.position = "absolute";
obj.style.top = "265px";
obj.style.top = "345px";
obj.style.width = "62px";
obj.style.height = "83px";
}

you should change your html as follows:
<a href="#" onclick="changeStyle(this)">Change Width Height & Position</a>

there is another solution that is CSS oriented and that consists of creating two css rules with different properties and when you click on the anchor you simply change the className of the div.

theflyingminstr

07-20-2009, 06:21 PM

Amazing, thanks so much!