运动框架

① window.getComputedStyle(节点变量名).width/height

返回带px单位的字符串

var oDiv = document.getElementsByClassName("move")[0];
console.log(oDiv);

var wid = window.getComputedStyle(oDiv).width;//获取宽度
console.log(wid);// "100px"

var widNum = parseInt(wid);//取整--转换为数字

让盒子变大

// 宽度逐渐变大
setInterval(changeBig,300);//定时器

var widNum = parseInt(wid);

function changeBig(){
	widNum += 10;//自加
	console.log(widNum);
	oDiv.style.width = widNum + "px";//将变量赋值给节点的width,注意加单位
			}

思考题1：让高度逐渐减少

var height1 = window.getComputedStyle(oDiv).height;//获取高度
console.log(height1);// "200px"
var heiNum = parseInt(height1);//取整--转换为数字

	//让高度逐渐减少
setInterval(changeSmall,300);//定时器

	function changeSmall(){
		heiNum -= 10;//自减
		onsole.log(heiNum);
		oDiv.style.height = heiNum + "px";//将变量赋值给节点的height,注意加单位
			}

② 节点变量名.clientWidth宽 节点变量名.clientHeight高 返回数字

写法：节点变量名.clientWidth = width + 左右的padding
节点变量名.clientHeight = height + 上下的padding

var oDiv = document.getElementsByClassName("move")[0];//获取节点
console.log(oDiv.clientWidth);//100
console.log(oDiv.clientHeight);//200

③节点变量名.offsetWidth 宽、 节点变量名.offsetHeight高 返回数字 和②包含边框
节点变量名.offsetWidth = width + 左右的padding + 左右的border
​节点变量名.offsetHeight = height + 上下的padding + 上下的border

console.log(oDiv.offsetWidth);//100
console.log(oDiv.offsetHeight);//200