这个例子，点一次按钮，图就变大一点
<!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/post/7477.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知