Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Div Style Elements Onclick Question

    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).

    Code:
    <!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

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    yes sure you can:
    Code:
    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:
    Code:
    <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.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Amazing, thanks so much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •