JavaScript DOM 編程藝術(shù)筆記(9章-10章)

第九章

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
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • (一)知識點(diǎn) 1.1屬性 element.className element對象的class字符串?dāng)?shù)組,每個字符...
    Zvit閱讀 486評論 0 0
  • 三位一體的頁面 結(jié)構(gòu)層 由HTML或XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。 表示層 由CSS負(fù)責(zé)完成,描述頁面內(nèi)容如何...
    fumier閱讀 300評論 0 0
  • 文/天水 細(xì)雨淋石路,青煙籠碧灣。 平湖無日月,落艷嘆悲歡。 緒斷天陰處,愁生水霧間。 蒼茫一大地,寂靜半城山。
    天水居士閱讀 313評論 13 12
  • 沒有目標(biāo)的人不會成長,遇到困難就去找工作,然后緩過來一點(diǎn)又想創(chuàng)業(yè)。 最終差距越來越大。 我已經(jīng)有過這樣的痛苦,所以...
    鄭向飛的空間閱讀 323評論 0 0

友情鏈接更多精彩內(nèi)容