javascript实现单击按钮使div变大效果
javascript是做效果是很强大的,在没有学习之前对于很多效果都不知道如何去实现。这是一个简单的例子,适用于js初学者。下面请看代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <title>无标题页</title> 5 </head> 6 <body> 7 <div id="div1"style="border-style:solid; border-color:Red;width:10px;height:100px;border-widht:1px;"> 8 什 9 么 10 什 11 么 12 什 13 么 14 什 15 么 16 什 17 么 18 什 19 么 20 什 21 么 22 什 23 么 24 什 25 么 26 什 27 么 28 什 29 么 30 什 31 么 32 什 33 么 34 什 35 么 36 什 37 么 38 什 39 么 40 什 41 么 42 什 43 么 44 </div> 45 <input type="button" value="放大" onclick="document.getElementById('div1');div1.style.width='200px';div1.style.height='200px';"/> 46 </body> 47 </html>
这次的javascript代码是卸载控件的onclick事件中。首先先使用document.getElementById('div1');得到div1。要想使层变大实际上是修改div的样式中的width和height属性。所以使用div1.style.width=‘200px’;将div1的宽度修改为200像素,使用div1.style.height='200px';将div1的高度也修改200像素。