<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • 針對dom元素的分析應(yīng)用

    時間:2024-08-15 00:24:37 XML DOM 我要投稿
    • 相關(guān)推薦

    針對dom元素的分析應(yīng)用

      如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態(tài)的向html里寫入DOM元素。

      今天這章我們就講這兩個應(yīng)用

      (一)對html里現(xiàn)有的DOM元素進行操作。

      我上面說了,對現(xiàn)有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣式。在講獲取DOM元素的樣式之前。先要說下DOM元素的樣式鏈接方式。有三種。

      一是直接在html文檔里寫入樣式例如

      

      二是在html文檔頭部用樣式標簽插入例如

      #dom{width:300px;height:200px;background:#000;}

      三就是我們常用的鏈入方式例如

      這三種的用JS操作它樣式的方法都不太相同

      重點我們說第一種鏈入樣式操作,因為是最常用的,也是最方便的。

      第二種鏈入樣式操作麻煩。

      第三種鏈入樣式操作麻煩不說,而且無法直接修改樣式,想修改的話還必須用第一種的方法,也就是說只能看不能摸

      第一種鏈入樣式的操作方法

      例

      獲取它的高度屬性,首先當然是獲取DOM元素了,用前幾章的方法

      var a = document.getElementById("dom");

      再來獲取它的高度屬性,很簡單

      var h = a.style.height;

      以此類推,獲取寬度,獲取背景色

      var w = a.style.width;

      var bg = a.style.background;

      注意那個外邊距屬性是margin-top;

      要獲取這個不能直接寫

      var mt = a.style.margin-top;

      要用JQ中提到的駱駝寫法

      var mt = a.style.marginTop;

      獲取它當然沒什么用處,我們要能修改,修改起來也很方便。例如我們要把它的高度變?yōu)?00,很簡單,就一句

      a.style.height = "100px";

      其他的以此類推,我不再多說;

      第二種鏈入樣式的操作方法

      #dom{width:300px;height:200px;background:#000;margin-top:10px;}

      這種操作需要區(qū)分瀏覽器。因為IE和FF對這個獲取的代碼不同,比如獲取高度的方法是

      var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;

      var a = domcss[0].style.height;

      修改的話是這樣的

      domcss[0].style.height = "100px";

      這個我也不想解釋為什么是這樣寫。大家感興趣的自己去查下;

      第三種鏈入樣式的操作方法

      這種操作也需要區(qū)分瀏覽器。

      獲取的話一般都是寫個函數(shù),函數(shù)是這樣的

      function CurrentStyle(element){

      return element.currentStyle || document.defaultView.getComputedStyle(element, null);

      }

      假如我們那個css.css文件里面有height屬性

      獲取方法是var a = CurrentStyle("dom").height;

      無法用這里的方法直接修改,只能用第一種方法修改

      這個我也不想解釋為什么是這樣寫。大家感興趣的自己去查下;

      (二)用JS動態(tài)創(chuàng)建DOM元素。

      其實這個很簡單就是幾個JS的方法而已,不過要像蓋房子一樣一步一步來,比如我要創(chuàng)建一個這樣的DOM元素:

      第一步,要創(chuàng)建一個div節(jié)點。var newobj = document.createElement("div");

      第二步,要給這個節(jié)加一個id屬性,并且屬性名是dom。newobj.setAttribute("id","dom");

      第三步,要給這個節(jié)點加屬性了這里有兩種方,一種就是我們前面說到的修改樣式是這樣的newobj.style.width = "100px";還有一種就是第二步用到的那個方法newobj.setAttribute("width","100px"),其他屬性以此類推

      第四步,就是要把這個節(jié)點給放到html文檔里,方法是這樣的document.body.appendChild(newobj)這句的意思是這樣的。document.body就是獲取了body元素

      ,appendChild(newobj)就是向這個body元素里添加一個孩子元素就是我們創(chuàng)建的那個節(jié)點。

      如果你想移除這個節(jié)點是這樣document.body.removeChild(newobj);

      (這個可以換的,換成你想要向那個里面添加子元素的的那個元素,比如我想向id為con的這個元素添加節(jié)點我們就這樣寫document.getElementById("con").appendChild(newobj))

      這就算是完成了。JS里有很多和appendChild差不多的方法。用法和這個一樣大家有興趣的可以去百度一下。所以我這里也就不說了,都不太常用。

      好這章就到這里了,下章開始就用開始教大家寫一些效果了。

    《国内精品久久久久国产盗摄,精品国产福利第一区二区三区,欧美精品一区二区蜜臀亚洲.doc》
    将本文的Word文档下载到电脑,方便收藏和打印
    推荐度:
    点击下载文档

    【針對dom元素的分析應(yīng)用】相關(guān)文章:

    關(guān)于BOM與DOM的區(qū)別的分析09-04

    關(guān)于Meta標簽元素分析研究分析07-21

    平面設(shè)計中元素的概念與應(yīng)用08-20

    中國元素在動畫設(shè)計中的應(yīng)用09-16

    國畫元素在動畫設(shè)計中的應(yīng)用07-21

    廣告設(shè)計中中國元素的應(yīng)用09-28

    色彩元素在室內(nèi)居室設(shè)計中的應(yīng)用05-07

    五行元素在環(huán)境設(shè)計中的應(yīng)用01-04

    民間美術(shù)元素在現(xiàn)代平面設(shè)計中的應(yīng)用05-17

    園林景觀設(shè)計實體元素應(yīng)用解析10-28

    在线咨询
    主站蜘蛛池模板: 亚洲综合国产精品| 欧美精品国产日韩综合在线| 成人精品视频在线观看| 精品国产免费一区二区三区| 国产精品熟女高潮视频| 久久久久人妻一区精品果冻| 秋霞午夜鲁丝片午夜精品久| 亚洲AV成人精品网站在线播放| 国产精品电影在线| 99re这里只有精品6| 亚洲国产精品无码久久98| 精品国产午夜福利在线观看 | 久久精品免费大片国产大片| 日韩精品人妻av一区二区三区| 亚洲国产精品自在在线观看 | 亚洲性日韩精品国产一区二区 | 日韩精品一区二区午夜成人版| 久久精品国产国产精品四凭| 亚洲精品国产电影| 亚洲处破女AV日韩精品| 97久久精品人妻人人搡人人玩| 99亚洲精品视频| 亚洲国产精品无码专区在线观看| www.亚洲精品| 久久夜色撩人精品国产小说| 国产中老年妇女精品| 国产精品美女久久久久AV福利| 亚洲国产精品碰碰| 欧美国产日本精品一区二区三区| 拍国产真实乱人偷精品| 青青青青久久精品国产| 亚洲国产精品一区二区第一页| 无码精品一区二区三区免费视频| 亚洲日韩国产精品第一页一区| 久久精品国产半推半就| 日韩精品无码久久久久久| 精品精品国产国产| 精品亚洲永久免费精品| 久久精品夜夜夜夜夜久久| 精品久久久久久国产牛牛app| 久久99久久99小草精品免视看|

    針對dom元素的分析應(yīng)用

      如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態(tài)的向html里寫入DOM元素。

      今天這章我們就講這兩個應(yīng)用

      (一)對html里現(xiàn)有的DOM元素進行操作。

      我上面說了,對現(xiàn)有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣式。在講獲取DOM元素的樣式之前。先要說下DOM元素的樣式鏈接方式。有三種。

      一是直接在html文檔里寫入樣式例如

      

      二是在html文檔頭部用樣式標簽插入例如

      #dom{width:300px;height:200px;background:#000;}

      三就是我們常用的鏈入方式例如

      這三種的用JS操作它樣式的方法都不太相同

      重點我們說第一種鏈入樣式操作,因為是最常用的,也是最方便的。

      第二種鏈入樣式操作麻煩。

      第三種鏈入樣式操作麻煩不說,而且無法直接修改樣式,想修改的話還必須用第一種的方法,也就是說只能看不能摸

      第一種鏈入樣式的操作方法

      例

      獲取它的高度屬性,首先當然是獲取DOM元素了,用前幾章的方法

      var a = document.getElementById("dom");

      再來獲取它的高度屬性,很簡單

      var h = a.style.height;

      以此類推,獲取寬度,獲取背景色

      var w = a.style.width;

      var bg = a.style.background;

      注意那個外邊距屬性是margin-top;

      要獲取這個不能直接寫

      var mt = a.style.margin-top;

      要用JQ中提到的駱駝寫法

      var mt = a.style.marginTop;

      獲取它當然沒什么用處,我們要能修改,修改起來也很方便。例如我們要把它的高度變?yōu)?00,很簡單,就一句

      a.style.height = "100px";

      其他的以此類推,我不再多說;

      第二種鏈入樣式的操作方法

      #dom{width:300px;height:200px;background:#000;margin-top:10px;}

      這種操作需要區(qū)分瀏覽器。因為IE和FF對這個獲取的代碼不同,比如獲取高度的方法是

      var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules;

      var a = domcss[0].style.height;

      修改的話是這樣的

      domcss[0].style.height = "100px";

      這個我也不想解釋為什么是這樣寫。大家感興趣的自己去查下;

      第三種鏈入樣式的操作方法

      這種操作也需要區(qū)分瀏覽器。

      獲取的話一般都是寫個函數(shù),函數(shù)是這樣的

      function CurrentStyle(element){

      return element.currentStyle || document.defaultView.getComputedStyle(element, null);

      }

      假如我們那個css.css文件里面有height屬性

      獲取方法是var a = CurrentStyle("dom").height;

      無法用這里的方法直接修改,只能用第一種方法修改

      這個我也不想解釋為什么是這樣寫。大家感興趣的自己去查下;

      (二)用JS動態(tài)創(chuàng)建DOM元素。

      其實這個很簡單就是幾個JS的方法而已,不過要像蓋房子一樣一步一步來,比如我要創(chuàng)建一個這樣的DOM元素:

      第一步,要創(chuàng)建一個div節(jié)點。var newobj = document.createElement("div");

      第二步,要給這個節(jié)加一個id屬性,并且屬性名是dom。newobj.setAttribute("id","dom");

      第三步,要給這個節(jié)點加屬性了這里有兩種方,一種就是我們前面說到的修改樣式是這樣的newobj.style.width = "100px";還有一種就是第二步用到的那個方法newobj.setAttribute("width","100px"),其他屬性以此類推

      第四步,就是要把這個節(jié)點給放到html文檔里,方法是這樣的document.body.appendChild(newobj)這句的意思是這樣的。document.body就是獲取了body元素

      ,appendChild(newobj)就是向這個body元素里添加一個孩子元素就是我們創(chuàng)建的那個節(jié)點。

      如果你想移除這個節(jié)點是這樣document.body.removeChild(newobj);

      (這個可以換的,換成你想要向那個里面添加子元素的的那個元素,比如我想向id為con的這個元素添加節(jié)點我們就這樣寫document.getElementById("con").appendChild(newobj))

      這就算是完成了。JS里有很多和appendChild差不多的方法。用法和這個一樣大家有興趣的可以去百度一下。所以我這里也就不說了,都不太常用。

      好這章就到這里了,下章開始就用開始教大家寫一些效果了。