Posted By

fernandaparisi on 03/19/08


Tagged

css javascript resize


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

blackabee


Resizing a DIV


 / Published in: JavaScript
 

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. * a { outline: none; }
  5. body { font: 14px Arial, Verdana, sans-serif; text-align: center; }
  6. div { border: 1px solid #ccc; border-bottom-width: 3px; border-right-width: 3px; padding: 100px 0; width: 300px; margin: 10px auto; }
  7. .maior { width: 99%; }
  8. input { margin: 10px auto; }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="campo" class="">Normal div</div>
  13. <input type="button" value="Make it wider" onClick="aumentaDiv()" />&nbsp;&nbsp;
  14. <input type="button" value="Make it normal" onClick="diminuiDiv()" />
  15.  
  16. <script type="text/javascript">
  17. var campoAtivo = document.getElementById("campo");
  18. function aumentaDiv() {
  19. campoAtivo.className = "maior";
  20. campoAtivo.innerHTML = "Wider div";
  21. }
  22. function diminuiDiv() {
  23. campoAtivo.className = "";
  24. campoAtivo.innerHTML = "Normal div";
  25. }
  26. </script>
  27. </body>
  28. </html>

Report this snippet  

You need to login to post a comment.