第九章
style屬性
每個元素節(jié)點(diǎn)都有一個屬性 style,這個屬性會返回一個對象,樣式都放在這個對象里面
-
獲取樣式方式:
element.style.color以上代碼會獲取元素的樣式中的 color 屬性
-
如果獲取的 CSS 樣式名有"-"連詞符號,則轉(zhuǎn)換成駝峰法命名,比如要獲取"font-family"屬性,那么在 DOM 里應(yīng)該如下:
element.style.fontFamily 在外部樣式表聲明的樣式不會進(jìn)入 style 對象,在文檔的<head>部分里聲明的樣式也是如此,也就是說只有寫在 HTML 文檔里面的樣式才能用 style 屬性獲取到,但是通過 DOM 設(shè)置的樣式是可以檢索到的。
-
通過 style 對象獲取到的樣式是可寫的,可以直接用賦值操作更新樣式
element.style.property = value style 對象的屬性值必須放在引號里
如果想改變某個元素的呈現(xiàn)效果,使用CSS;如果想改變某個元素的行為,使用DOM。
className 屬性
className 是一個可讀可寫的屬性,凡是元素節(jié)點(diǎn)都有這個屬性。
-
可以用 className 屬性得到一個元素的 class 屬性:
element.className -
也可以用 className 屬性設(shè)置一個元素的 class 屬性:
element.className = value -
通過 className 是指某個元素的 class屬性時將覆蓋該元素原有的 class 設(shè)置,但是我們可以利用字符串拼接操作把新的 class 設(shè)置追加到 className 上去,而不是覆蓋:
lement.className += " newValue"注意 newValue 前面有一個空格
-
當(dāng)然,我們可以把添加 class 的操作封裝成一個函數(shù) addClass,這個函數(shù)有個兩個參數(shù):第一個是需要添加新 class 的元素,第二個是新的 class 設(shè)置值:
function addClass(element,value) { if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; } }
第十章
setTimeout 函數(shù)
-
setTimeout 函數(shù)可以讓某個函數(shù)在經(jīng)過一段預(yù)定的時間之后才開始執(zhí)行,這個函數(shù)有兩個參數(shù):第一個參數(shù)通常是一個字符串,其內(nèi)容是將要執(zhí)行的那個函數(shù)的名字;第二個參數(shù)是一個數(shù)字,它以毫秒為單位設(shè)置了需要多長時間后才開始執(zhí)行第一個參數(shù)所給的函數(shù):
variable = setTimeout("function", interval) movement = setTimeout("moveMessage()",5000);
-
可以用 clearTimeout 函數(shù)來取消“等待執(zhí)行”隊(duì)列里的某個函數(shù)。這個函數(shù)需要一個參數(shù):保存著 setTimeout 函數(shù)調(diào)用返回值的變量:
clearTimeout(variable) -
一個移動某個元素的封裝函數(shù):elementID 為移動元素的 ID, final_x 和 final_y 分別為元素的終點(diǎn)位置的 px 值,interval 為每幀的間隔時間
function moveElement(elementID,final_x,final_y,interval) { if (!document.getElementById) return false; if (!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID); if (elem.movement) { clearTimeout(elem.movement); } if (!elem.style.left) { elem.style.left = "0px"; } if (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); if (xpos == final_x && ypos == final_y) { return true; } if (xpos < final_x) { var dist = Math.ceil((final_x - xpos)/10); xpos = xpos + dist; } if (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } if (ypos < final_y) { var dist = Math.ceil((final_y - ypos)/10); ypos = ypos + dist; } if (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos + "px"; elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement = setTimeout(repeat,interval); }
Math 關(guān)于小數(shù)的舍入方法
-
Math.ceil 方法可對一個數(shù)進(jìn)行上舍入。
Math.ceil(1.4) // 結(jié)果為2 -
Math.floor 方法可對一個數(shù)進(jìn)行下舍入。
Math.floor(1.4) // 結(jié)果為1 -
Math.round 方法可對一個數(shù)進(jìn)行四舍五入為最接近的整數(shù)。
Math.round(1.5) // 結(jié)果為2 Math.round(1.4) // 結(jié)果為1