叮當(dāng)貓咪
2018-10-19 11:22:24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&...<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><script type="text/javascript" src="../js/jquery-3.1.1.js"></script><style>*{ margin: 0px; padding: 0px;}div { width: 60px; padding: 10px; height: 50px; float: left; margin: 5px; background: red; cursor: pointer;}.mod { background: blue; cursor: default;}</style></head><body><div>d</div><div>d</div><div>d</div><div>d</div><div>d</div><script>var modWidth = 60;
$("div").one("click", function() {
$(this).outerWidth(modWidth).addClass("mod");
modWidth -= 6;
});</script></body></html>h運(yùn)行后不是很明白第一個點(diǎn)擊之后為什么是40X50?40是怎么得來的?
1 回答

波斯汪
TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個贊
outerWidth(options)
獲取第一個匹配元素外部寬度(默認(rèn)包括補(bǔ)白 padding和邊框border )。
此方法對可見和隱藏元素均有效。
返回值:Integer
參數(shù):
options(Boolean) : (false) 設(shè)置為 true 時,計算外邊距 margin在內(nèi)。默認(rèn)參數(shù)是 false;
首先 你紅盒子點(diǎn)擊之前 實(shí)際大小為80*70
點(diǎn)擊以后 實(shí)際大小為 60*70
此時你點(diǎn)擊第一次的時候 獲取的第一個紅盒子的outWidth的width就為其padding+border的大小
由圖片可以看出 盒子的padding一直都是:10,10,10,10 而border為0
所以outwidth 自然就等于10*4=40
所以第一個點(diǎn)擊的紅盒子變成藍(lán)盒子的時候 outWidth自然為40 高度不變 點(diǎn)擊后為40*50
接下來 點(diǎn)擊的每個盒子的outwidth依次減去6
添加回答
舉報
0/150
提交
取消