1. <tt id="5hhch"><source id="5hhch"></source></tt>
    1. <xmp id="5hhch"></xmp>

  2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

    <rp id="5hhch"></rp>
        <dfn id="5hhch"></dfn>

      1. 針對dom元素的分析應用

        時間:2020-11-10 16:56:59 XML DOM 我要投稿

        針對dom元素的分析應用

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

          今天這章我們就講這兩個應用

         。ㄒ唬⿲tml里現有的DOM元素進行操作。

          我上面說了,對現有的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;

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

          a.style.height = "100px";

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

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

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

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

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

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

          修改的話是這樣的

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

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

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

          這種操作也需要區分瀏覽器。

          獲取的話一般都是寫個函數,函數是這樣的

          function CurrentStyle(element){

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

          }

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

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

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

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

         。ǘ┯肑S動態創建DOM元素。

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

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

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

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

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

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

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

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

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

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

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码

        1. <tt id="5hhch"><source id="5hhch"></source></tt>
          1. <xmp id="5hhch"></xmp>

        2. <xmp id="5hhch"><rt id="5hhch"></rt></xmp>

          <rp id="5hhch"></rp>
              <dfn id="5hhch"></dfn>