JS点击让元素变大
这个例子，点一次按钮，图就变大一点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #kk{ /*width: 300px;*/ height: 280px; background: #DDA0DD; margin: 100px auto; } </style> <script type="text/javascript"> window.onload = function(){ // 为了方便,把能用到的先抓元素,先存到一个变量里! 变量的名字可以随便取，取跟id名字一样是为了好用 var dd =document.getElementById('dd'); var kk = document.getElementById('kk'); // 给按钮加单击事件 dd.onclick = function(){ // 获得元素当前的宽度 var kk_width = kk.style.width; // alert(kk_width); // 计算新的宽度值 // var cc_width = kk_width+10; // parseInt将字符串转换成整数 kk_width:300px转换成300,px去掉 var cc_width = parseInt(kk_width)+10; // 将新的宽度值赋值回元素 加上单位，不能让它回去也是310吧 kk.style.width = cc_width+'px'; } } // 上面的这个也是写运动的基本步骤 </script> </head> <body> <input type="button" id="dd" value="点我呀" /> <br /><br /> <!--为了方便抓这个宽度，把宽度写在行内样式里。要不然kk_width抓不到--> <div id="kk" style="width: 300px;"></div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知