Node節點對象 · 前端

## 屬性和方法以上屬性和方法可適用于所有 HTML 元素： | 屬性 / 方法 | 描述 | | :-- | :-- | | [*element*.accessKey](https://www.runoob.com/jsref/prop-html-accesskey.html) | 設置或返回accesskey一個元素 | | [*element*.addEventListener()](https://www.runoob.com/jsref/met-element-addeventlistener.html) | 向指定元素添加事件句柄 | | [*element*.appendChild()](https://www.runoob.com/jsref/met-node-appendchild.html) | 為元素添加一個新的子元素 | | [*element*.attributes](https://www.runoob.com/jsref/prop-node-attributes.html) | 返回一個元素的屬性數組 | | [*element*.childNodes](https://www.runoob.com/jsref/prop-node-childnodes.html) | 返回元素的一個子節點的數組 | | [*element*.children](https://www.runoob.com/jsref/prop-element-children.html) | 返回元素的子元素的集合 | | [*element*.classList](https://www.runoob.com/jsref/prop-element-classList.html) | 返回元素的類名，作為 DOMTokenList 對象。 | | [*element*.className](https://www.runoob.com/jsref/prop-html-classname.html) | 設置或返回元素的class屬性 | | *element*.clientHeight | 在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條） | | *element*.clientWidth | 在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條） | | [*element*.cloneNode()](https://www.runoob.com/jsref/met-node-clonenode.html) | 克隆某個元素 | | [*element*.compareDocumentPosition()](https://www.runoob.com/jsref/met-node-comparedocumentposition.html) | 比較兩個元素的文檔位置。 | | [*element*.contentEditable](https://www.runoob.com/jsref/prop-html-contenteditable.html) | 設置或返回元素的內容是否可編輯 | | [*element*.dir](https://www.runoob.com/jsref/prop-html-dir.html) | 設置或返回一個元素中的文本方向 | | [*element*.firstChild](https://www.runoob.com/jsref/prop-node-firstchild.html) | 返回元素的第一個子節點,注意文字也是文本節點，eg：`<tr><td id="t1">one</td></tr>`<br>` console.log(document.getElementById("t1").firstChild)//"one"`<br>`<tr><td id="t2"><span>two</span></td></tr>` <br>`console.log(document.getElementById("t1").firstChild)//<span>two</span>`| | [*element*.focus()](https://www.runoob.com/jsref/met-html-focus.html) | 設置文檔或元素獲取焦點 | | [*element*.getAttribute()](https://www.runoob.com/jsref/met-element-getattribute.html) | 返回指定元素的屬性值 | | [*element*.getAttributeNode()](https://www.runoob.com/jsref/met-element-getattributenode.html) | 返回指定屬性節點 | | [*element*.getElementsByTagName()](https://www.runoob.com/jsref/met-element-getelementsbytagname.html) | 返回指定標簽名的所有子元素集合。 | | [*element*. getElementsByClassName()](https://www.runoob.com/jsref/met-element-getelementsbyclassname.html) | 返回文檔中所有指定類名的元素集合，作為 NodeList 對象。 | | *element*.getFeature() | 返回指定特征的執行APIs對象。 | | *element*.getUserData() | 返回一個元素中關聯鍵值的對象。 | | [*element*.hasAttribute()](https://www.runoob.com/jsref/met-element-hasattribute.html) | 如果元素中存在指定的屬性返回 true，否則返回false。 | | [*element*.hasAttributes()](https://www.runoob.com/jsref/met-node-hasattributes.html) | 如果元素有任何屬性返回true，否則返回false。 | | [*element*.hasChildNodes()](https://www.runoob.com/jsref/met-node-haschildnodes.html) | 返回一個元素是否具有任何子元素 | | [*element*.hasFocus()](https://www.runoob.com/jsref/met-document-hasfocus.html) | 返回布爾值，檢測文檔或元素是否獲取焦點 | | [*element*.id](https://www.runoob.com/jsref/prop-html-id.html) | 設置或者返回元素的 id。 | | [*element*.innerHTML](https://www.runoob.com/jsref/prop-html-innerhtml.html) | 設置或者返回元素的內容。 | | [*element*.insertBefore()](https://www.runoob.com/jsref/met-node-insertbefore.html) | 現有的子元素之前插入一個新的子元素 | | [*element*.isContentEditable](https://www.runoob.com/jsref/prop-html-iscontenteditable.html) | 如果元素內容可編輯返回 true，否則返回false | | [*element*.isDefaultNamespace()](https://www.runoob.com/jsref/met-node-isdefaultnamespace.html) | 如果指定了namespaceURI 返回 true，否則返回 false。 | | [*element*.isEqualNode()](https://www.runoob.com/jsref/met-node-isequalnode.html) | 檢查兩個元素是否相等 | | [*element*.isSameNode()](https://www.runoob.com/jsref/met-node-issamenode.html) | 檢查兩個元素所有有相同節點。 | | [*element*.isSupported()](https://www.runoob.com/jsref/met-node-issupported.html) | 如果在元素中支持指定特征返回 true。 | | [*element*.lang](https://www.runoob.com/jsref/prop-html-lang.html) | 設置或者返回一個元素的語言。 | | [*element*.lastChild](https://www.runoob.com/jsref/prop-node-lastchild.html) | 返回的最后一個子節點 | | [*element*.namespaceURI](https://www.runoob.com/jsref/prop-node-namespaceuri.html) | 返回命名空間的 URI。 | | [*element*.nextSibling](https://www.runoob.com/jsref/prop-node-nextsibling.html) | 返回該元素緊跟的一個節點 | | [*element*.nextElementSibling](https://www.runoob.com/jsref/prop-element-nextelementsibling.html) | 返回指定元素之后的下一個兄弟元素（相同節點樹層中的下一個元素節點）。 | | [*element*.nodeName](https://www.runoob.com/jsref/prop-node-nodename.html) | 返回元素的標記名（大寫） | | [*element*.nodeType](https://www.runoob.com/jsref/prop-node-nodetype.html) | 返回元素的節點類型 | | [*element*.nodeValue](https://www.runoob.com/jsref/prop-node-nodevalue.html) | 返回元素的節點值 | | [*element*.normalize()](https://www.runoob.com/jsref/met-node-normalize.html) | 使得此成為一個"normal"的形式，其中只有結構（如元素，注釋，處理指令，CDATA節和實體引用）隔開Text節點，即元素（包括屬性）下面的所有文本節點，既沒有相鄰的文本節點也沒有空的文本節點 | | *element*.offsetHeight | 返回任何一個元素的高度包括邊框和填充，但不是邊距 | | *element*.offsetWidth | 返回元素的寬度，包括邊框和填充，但不是邊距 | | *element*.offsetLeft | 返回當前元素的相對水平偏移位置的偏移容器 | | *element*.offsetParent | 返回元素的偏移容器 | | *element*.offsetTop | 返回當前元素的相對垂直偏移位置的偏移容器 | | [*element*.ownerDocument](https://www.runoob.com/jsref/prop-node-ownerdocument.html) | 返回元素的根元素（文檔對象） | | [*element*.parentNode](https://www.runoob.com/jsref/prop-node-parentnode.html) | 返回元素的父節點 | | [*element*.previousSibling](https://www.runoob.com/jsref/prop-node-previoussibling.html) | 返回某個元素緊接之前元素 | | [*element*.previousElementSibling](https://www.runoob.com/jsref/prop-element-previouselementsibling.html) | 返回指定元素的前一個兄弟元素（相同節點樹層中的前一個元素節點）。 | | [*element*.querySelector()](https://www.runoob.com/jsref/met-element-queryselector.html) | 返回匹配指定 CSS 選擇器元素的第一個子元素 | | document.querySelectorAll() | 返回匹配指定 CSS 選擇器元素的所有子元素節點列表 | | [*element*.removeAttribute()](https://www.runoob.com/jsref/met-element-removeattribute.html) | 從元素中刪除指定的屬性 | | [*element*.removeAttributeNode()](https://www.runoob.com/jsref/met-element-removeattributenode.html) | 刪除指定屬性節點并返回移除后的節點。 | | [*element*.removeChild()](https://www.runoob.com/jsref/met-node-removechild.html) | 刪除一個子元素 | | [*element*.removeEventListener()](https://www.runoob.com/jsref/met-element-removeeventlistener.html) | 移除由 addEventListener() 方法添加的事件句柄 | | [*element*.replaceChild()](https://www.runoob.com/jsref/met-node-replacechild.html) | 替換一個子元素 | | *element*.scrollHeight | 返回整個元素的高度（包括帶滾動條的隱蔽的地方） | | *element*.scrollLeft | 返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離 | | *element*.scrollTop | 返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離 | | *element*.scrollWidth | 返回元素的整個寬度（包括帶滾動條的隱蔽的地方） | | [*element*.setAttribute()](https://www.runoob.com/jsref/met-element-setattribute.html) | 設置或者改變指定屬性并指定值。 | | [*element*.setAttributeNode()](https://www.runoob.com/jsref/met-element-setattributenode.html) | 設置或者改變指定屬性節點。 | | *element*.setIdAttribute() | | | *element*.setIdAttributeNode() | | | *element*.setUserData() | 在元素中為指定鍵值關聯對象。 | | *element*.style | 設置或返回元素的樣式屬性 | | [*element*.tabIndex](https://www.runoob.com/jsref/prop-html-tabindex.html) | 設置或返回元素的標簽順序。 | | [*element*.tagName](https://www.runoob.com/jsref/prop-element-tagname.html) | 作為一個字符串返回某個元素的標記名（大寫） | | [*element*.textContent](https://www.runoob.com/jsref/prop-node-textcontent.html) | 設置或返回一個節點和它的文本內容 | | [*element*.title](https://www.runoob.com/jsref/prop-html-title.html) | 設置或返回元素的title屬性 | | *element*.toString() | 一個元素轉換成字符串 | | [*nodelist*.item()](https://www.runoob.com/jsref/met-nodelist-item.html) | 返回某個元素基于文檔樹的索引 | | [*nodelist*.length](https://www.runoob.com/jsref/prop-nodelist-length.html) | 返回節點列表的節點數目。 | ## **節點組成：** Document就是文檔的根節點節點= 標簽（元素）節點+屬性節點+文本節點 nodeType：節點類型節點名稱：nodeName 節點值：nodeValue 例子： ~~~ <ul> <li>高效的程序員</li> <li data="1">當世界末日還剩余五分鐘的時候</li> <li>女朋友說：讓我們做點什么吧</li> <li>男朋友說：讓我們在做最后一次吧</li> <li>剩下的的4分50秒做什么</li> </ul> <script> // 節點：屬性 var li = document.getElementsByTagName('li'); // 標簽節點 console.log('標簽節點的類型：'+li[0].nodeType); // 1 console.log('標簽節點的名稱：'+li[0].nodeName); // LI console.log('標簽節點的值：'+li[0].nodeValue); // null // 屬性節點 // 獲取第二個li的屬性 var attr = li[1].attributes; console.log(attr); console.log('屬性節點的類型'+attr[0].nodeType); // 2 console.log('屬性節點的名稱'+attr[0].nodeName); // data console.log('屬性節點的值'+attr[0].nodeValue); // 1 // node:節點 child:孩子 // 文本節點 var text = li[2].childNodes; console.log(text); console.log('文本節點的類型：'+text[0].nodeType); // 3 console.log('文本節點的名稱：'+text[0].nodeName); // #text console.log('文本節點的值：'+text[0].nodeValue); // 女朋友說：讓我們做點什么吧 /* 節點：標簽+屬性+文本標簽.nodeType 屬性.nodeName 文本.nodeValue (*)節點類型(nodeType) 1 2 3 節點名稱(nodeName) 返回標簽名返回屬性名 #text 節點值(nodeValue) null 屬性值文本內容 */ ~~~ ## ## **節點訪問：** **父節點** 獲取父節點：? ? ? ? ? ? ? ? ? ?parentNode? ? \[子節點對象.parentNode\] **兄弟節點** 獲取上一個兄弟節點： previousSibling 獲取下一個兄弟節點： nexSibling 獲取下一個兄弟標簽節點：? ? ?nextElementSibling 獲取第一個子節點：? ? ? ??firstElementChild **子節點：** 所有之節點： childNodes 所有標簽子節點： .children?? 所有標簽子節點： .getElementsByTagName("li"); 第一個子標簽節點[IE9+]： .firstElementChild 第一個子子節點： .firstChild;//等于c1[0] 最后一個子節點： .lastChild; **創建節點** 創建節點（元素）??createElement("標簽名") 創建文本節點：createTextNode("文本內容") 創建屬性節點：createAttribute("屬性名") **追加節點** 追加文本節點（末尾追加）：appendChild("子節點對象") 在指定的舊子節點前面插入新子節點： insertBefore("新子節點對象", "舊子節點對象") **克隆節點** 克隆：cloneNode() 克隆子節點：replaceChild("新子節點對象", "舊子節點對象") **刪除節點** 刪除節點：removeChild("子節點對象") **特殊** innerHTML也可以完成DOM的增刪改相關操作 ``` <ul id="list"> <li>1</li> <li>2</li> <li>3</li> </ul> <script type="text/javascript"> /* 方法1 */ var parent_ul=document.getElementById("list"); var new_son_li=document.createElement("li"); var li_text=document.createTextNode("a"); new_son_li.appendChild(li_text); parent_ul.appendChild(new_son_li); /* 方法2 */ var parent_ul=document.getElementById("list"); var new_son_li=document.createElement("li"); parent_ul.innerHTML+="<li>b</li>"; /* 此方法比較消耗性能他會將li全刪掉在插入，一般兩種方式結合 */ /* 結合 */ var parent_ul=document.getElementById("list"); new_son_li.innerHTML+="c"; parent_ul.appendChild(new_son_li); </script> ``` ## ## **節點屬性操作：** 獲取屬性：getAttribute 設置屬性：setAttribute? ? ? ? ??setAttributeNode(attributeNode) 刪除屬性：removeAttribute? ? ? ? ??removeAttributeNode(attributeNode) **創建屬性節點** ``` document.createAttribute() //創建一個屬性節點 ``` 獲取屬性節點 ``` element.attributes;//返回一個元素的屬性數組 document.getElementById("xxoo").attributes[0];//element.attributes[0] element.getAttributeNode();//返回指定屬性節 document.getElementsByTagName("a")[0].getAttributeNode("target"); element.title;//設置或返回元素的title屬性 element.className;//設置或返回元素的class屬性 ``` **重命名屬性** ``` document.renameNode()//重命名元素或者屬性節點。 ``` **修改屬性** ``` element.setAttribute("eg:type","eg:button");//設置或者改變指定屬性并指定值。 element.setAttributeNode("eg:class、name、id、value");//設置或者改變指定屬性節點。 ``` 刪除屬性 ``` element.removeAttribute()從元素中刪除指定的屬性 element.removeAttributeNode()刪除指定屬性節點并返回移除后的節點。 ``` **獲取屬性的值** ``` element.getAttribute();//返回指定元素的屬性值 ``` **判斷元素中是否有屬性** ``` element.hasAttribute("xxoo");//如果元素中存在指定的屬性返回 true，否則返回false。 element.hasAttributes();//如果元素有任何屬性返回true，否則返回false。 ``` **例子:** 1、獲取屬性? element.getAttribute(‘屬性名’)； //返回指定元素屬性名的屬性值? element.getAttributeNode(‘屬性名’)； //返回指定元素的屬性名和屬性值? element.attributes\[‘屬性名’\]；//返回指定元素的屬性名和屬性值? **獲取元素的子節點** ``` /* 獲取元素節點 */ var e=document.getElementById("list"); /* 獲取該元素的子節點 */ var c=e.getElementsByTagName("li"); var c1=e.childNodes; //返回包含標簽屬性及文本節點，標簽與標簽之間的空格與換行也會被當作文本節點（IE8及以下除外） var c2 =e.children;//獲取所有子標簽 var c3=e.firstElementChild;//獲取當前元素第一個子標簽[IE9+] var c4=e.firstChild;//等于c1[0] var c5=e.lastChild; console.log(e); console.log(c); console.log(c1); console.log(c2); console.log(c3); console.log(c4); ``` ~~~ <div id="box" class="classa"> 這是一個段落 </div> <script> var box=document.getElementById("box"); var attr=box.getAttribute('class'); console.log(attr); //classa var attr2=box.getAttributeNode('id'); console.log(attr2); //id="box"; var attr3=box.attributes['id']; console.log(attr3); //id="box"; </script> ~~~ 2、設置屬性? element.setAttribute(name,value); //添加指定的屬性，并為其賦指定的值。IE8及以下不支持? element.setAttributeNode(attrNode); //向元素中添加指定的屬性節點,如果這個指定的屬性已存在，則此方法會替換它 ~~~ <div id="box" class="classa">這是一個段落</div> <script> var box=document.getElementById("box"); //設置屬性 box.setAttribute('class','classb'); console.log(box); //<div id="box" class="classb">這是一個段落</div> //先創建屬性節點，再設置屬性值，最后設置屬性 var attr=document.createAttribute('name'); attr.nodeValue="p1"; box.setAttributeNode(attr); console.log(box); //<div id="box" class="classb" name="p1">這是一個段落</div> </script> ~~~ 3、刪除屬性? element.removeAttribute(‘屬性名’); //刪除指定的屬性,此方法不返回值? element.removeAttributeNode(attrNode); //刪除指定的屬性，并以 Attr Node 對象返回被刪除的屬性。 ~~~ <div id="box" class="classa">這是一個段落</div> <script> var box=document.getElementById("box"); //移除屬性 var attr=box.removeAttribute('class'); console.log(box); //<div id="box">這是一個段落</div> console.log(attr); //undefined //先獲取屬性，在刪除指定屬性 var attr2=box.getAttributeNode('id'); var attr3=box.removeAttributeNode(attr2); console.log(box); //<div>這是一個段落</div> console.log(attr2); //id="box" console.log(attr3); //id="box" </script> ~~~ 向div中追加一段文字 ~~~ <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div> <script> //創建p標簽 var para=document.createElement("p"); //創建文本節點 var node=document.createTextNode("這是一個新段落。"); //appendChild() 方法向節點添加最后一個子節點 para.appendChild(node); //獲取父節點 var element=document.getElementById("div1"); //向父節點追加子節點 element.appendChild(para); //您也可以使用 appendChild() 方法從一個元素向另一個元素中移動元素。 <ul id="myList1"> <li>Coffee</li> <li>Tea</li> </ul> <ul id="myList2"> <li>Water</li> <li>Milk</li> </ul> <p id="demo">請點擊按鈕把項目從一個列表移動到另一個列表中。</p> <button onclick="myFunction()">親自試一試</button> <script> function myFunction() { //獲取myList2的最后一個子節點 var node=document.getElementById("myList2").lastChild; //將獲取myList2的最后一個子節點追加到myList1最后 document.getElementById("myList1").appendChild(node); } </script> ~~~ ~~~ <ul> <li>1.春兒和靜靜的對話</li> <li>2早上春兒去廁所，突然發現少了什么東西</li> <li>3忘記帶碗筷了嗎？</li> <li>4滾...</li> <li>5忘記帶紙了嗎</li> <li>6嗯嗯嗯。。。</li> <li>7呵呵呵呵，看你吃完用什么擦嘴</li> <li>8呵呵呵</li> </ul> <script> // 獲取ul的子節點(ul和li之間，li和li之間有空格，空格是文本節點) var ul = document.getElementsByTagName('ul')[0]; // 獲取li var list = ul.childNodes; alert(list);//[object NodeList] alert(list.length); // 17 function getElement(obj){ // 過濾文本節點，獲取標簽節點(nodeType) var arr = []; for (var i = 0; i < obj.length; i++) { // 標簽節點 if (list[i].nodeType == 1) { arr.push(list[i]); } } console.log(arr); } getElement(list); </script> ~~~ ~~~ <div> <ul> <li>合路，你為什么遲到了</li> <li id="shuijiao">因為我睡過了</li> <li>你為什么睡過了呢</li> <li>因為夢里老師講的好，我想多聽會兒</li> </ul> </div> <script> /* // 獲取子節點 firstChild: lastChild: childNodes: // 獲取父節點 parentNode: // 獲取屬性節點 attributes: // 同輩元素 nextSibling: previouSibling： */ var ul = document.getElementsByTagName('ul')[0]; var shuijiao = document.getElementById('shuijiao'); // 獲取子節點 console.log(ul.childNodes); // ul.firstChild:第一個子節點 console.log(ul.firstChild); // ul.lastChild獲取最后一個子節點 console.log(ul.lastChild); // shuijiao.parentNode:獲取父節點 console.log(shuijiao.parentNode); // nextSibling:獲取下一個兄弟節點 console.log(shuijiao.nextSibling); // previousSibling:獲取上一個同輩節點 console.log(shuijiao.previousSibling); </script> ~~~ ~~~ 節點的方法 var box = document.getElementById('box'); append:追加 box.appendChild(node):將node追加到box的末尾 insert:插入 before：在。。。之前 box.insertBefore(newNode, oldNode)：在box內，在oldNode的前面插入一個newNode box.replaceChild(newNode, oldNode):在box內部，將oldNode替換為newNode box.removeChild(node):刪除box內部的node節點 img.cloneNode(true):克隆所有的標簽屬性和文本節點 img.cloneNode():只克隆標簽和屬性 ~~~ ~~~ <div id="box" style="width:600px;height:500px;border:1px solid red;"> </div> <button>在div#box的末尾追加一張圖片</button> <button>在div#box的第一站圖片之前插入一張圖片</button> <button>替換div#box的最后一張圖片</button> <button>用第一張圖片替換最后一張圖片</button> <button>刪除最后一張圖片</button> <button>克隆第一張圖片放到最后</button> <script> // 1.獲取button按鈕對象 var btn = document.getElementsByTagName('button'); var box = document.getElementById('box'); // 2.按鈕 btn[0].onclick = function(){ // 2.1 創建圖片標簽 var img = document. ('img'); img.src = 'tao/'+getRand(1,11)+'.jpg'; // 2.2 將創建的img標簽追加到box內 box.appendChild(img); } btn[1].onclick = function(){ // 1.獲取第一張圖片對象 var old = box.firstChild; // 2.新的圖片對象 var newImg = document.createElement('img'); newImg.src = 'tao/'+getRand(1,11)+'.jpg'; // 3.insertBefore() box.insertBefore(newImg, old); } btn[2].onclick = function(){ // 1.找最后一張圖片 var oldImg = box.lastChild; // 2.創建新的圖片 var newImg = document.createElement('img'); newImg.src = 'tao/'+getRand(1,11)+'.jpg'; // 3.執行替換 box.replaceChild(newImg, oldImg); } // 用第一張替換最后一張 // box.replaceChild(new,old) /* 一個頁面中的對象是獨一無二的 */ btn[3].onclick = function(){ // 1.先獲取第一張圖片 var newImg = box.firstChild; // 2.獲取最后一張圖片 var oldImg = box.lastChild; // 3.執行替換 box.replaceChild(newImg,oldImg); } // 刪除最后一張圖片 btn[4].onclick = function(){ // 1.獲取最后一張圖片 var last = box.lastChild; // 2.執行刪除操作 box.removeChild(last); } // 將克隆第一個圖片放到box的最后位置 btn[5].onclick = function(){ // 1.獲取第一個圖片對象 var first = box.firstChild; // 2.克隆之后的節點 var firstImg = first.cloneNode(true); // 3.將克隆之后的節點放在最后的位置 box.appendChild(firstImg); } console.log(btn[3].cloneNode()); console.log(btn[3].cloneNode(true)); // 獲取隨機數 function getRand(n,m){ return Math.ceil(Math.random()*1000000)%(m-n+1)+n; } </script> ~~~ ~~~ <a href="http://tokyo-hot.com" data="xiaoxiaoze" title="全球最大的培訓基地">兄弟連</a> <script> // 獲取并改變HTML標簽的屬性 /* 系統就有的屬性：對象.屬性值自定義屬性：對象.setAttribute() 對象.getAttribute() */ // 獲取a連接對象 var link = document.getElementsByTagName('a')[0]; // 獲取link的屬性 console.log(link.href); // 改變屬性值 link.title = '全宇宙最大的影視基地'; // 自定義的屬性不可以直接獲取 // console.log(link.data); //undefined console.log(link.getAttribute('href')); console.log(link.getAttribute('data')); // setAttribute() link.setAttribute('title','北京這會兒好冷，為什么東京這么熱呢，因為有東京熱'); </script> ~~~ ~~~ <body> <div id="box" style="width:300px;height:300px;"> </div> <img src="tao/1.jpg" alt="" id="img"> <script> // 獲取并改變html標簽樣式 var box = document.getElementById('box'); var img = document.getElementById('img'); // 只能獲取行內樣式 // alert(box.style.width); // alert(box.style.height); // alert(box.style.background); // alert(document.defaultView.getComputedStyle(box,null)['background-color']); // alert(box.currentStyle['background-color']); // 兼容IE8及其以下的瀏覽器 // 兼容IE8和火狐谷歌最新的IE function getStyle(obj, attr){ if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView.getComputedStyle(obj,null)[attr]; } } alert(getStyle(box, 'background-color')); // 直接改變html的樣式 box.style.width = '500px'; img.width = 100; // 沒有單位 img.style.height = '200px'; </script> ~~~ ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .hover{ color:red; font-size: 20px; background: blue; } .click{ color:green; background: yellow; font-size: 30px; } </style> </head> <body> <ul> <li>程序員最討厭康熙的那個兒子</li> <li>八阿哥（bug）</li> <li>女朋友給男朋友說：煙盒上有警告，說抽煙有害健康</li> <li>我只關心error，不關心警告</li> </ul> <script> // 當鼠標放上去的時候，字體變大變紅，移開鼠標效果消失 // 1.獲取對象 var li = document.getElementsByTagName('li'); // 2鼠標的移入和移出 for (var i = 0; i < li.length; i++) { li[i].onmouseover = function(){ // this.style.color = 'red'; // this.style.fontSize = '20px'; // this.style.background = 'blue'; // this.style.fontWeight = 'bold'; // 鼠標放上去，如果是click，保留，如果不是click，設置為hover if (this.className == 'click') { this.className = 'click'; } else { this.className = 'hover'; } } li[i].onmouseout = function(){ // this.style.color = '#000'; // this.style.fontSize = '16px'; // 如果是點擊狀態，保持.click if (this.className == 'click') { this.className = 'click'; } else { this.className = ''; } } li[i].onclick = function(){ // if (this.style.background == 'yellow') { // this.style.background = ''; // } else { // this.style.background = 'yellow'; // } if (this.className != 'click') { this.className = 'click'; } else { this.className = ''; } } } // 任務：當鼠標放上去并且點擊的時候，出現改變為紅色背景并且不能消失，直到下次點擊才能消失 </script> </body> </html> ~~~