JavaScript != Java
再重覆 Bob 的話，用 99% 都可支援的 document.
getElementById()。現在 IE4 和 Netscape4 加起來市場佔有率都不到 1%，所以 document.all[] 和 document.layers[] 都可以退休了
用名稱存取物件:
代碼:
<div id="abc">
:
element = document.getElementById('abc');
用標籤存取物件(陣列):
代碼:
<img>
:
imgs = document.getElementsByTagName;
img0 = imgs[0];
設定屬性 (一):
代碼:
element = document.getElementById('bannerImg');
element.src = "banner.png";
element.style.border = "none";
設定屬性 (二):
代碼:
element.setAttribute("src","banner.png");
樣示存取 (一):
代碼:
// 語法: 物件.style.樣示特性
// JS 語法 o.style.color = CSS 語法 { color: }
element.style.color = "red";
// JS 語法 o.style.backgroundImage = { background-image }
element.style.backgroundImage = "bg.png";
// JS 語法 o.style.setProperty(prop,val) = { prop: val; }
element.style.setProperty("-moz-opacity", 0.2);
// 長度一定有單位，利如 element.style.top returns "100px" (而不是 100)
top = parseInt(element.style.top);
top += 100;
element.style.top = top + 'px'; // 往下100個像素
樣示存取 (二):
代碼:
// 一些樣示 (如 top) 會在顯示處理 (render) 後才有意義
// getComputedStyle() 取得即時計算出的樣式特性
top = parseInt(element.getComputedStyle('top'));
其它物件存取:
代碼:
//找文件中第一片斷文字
body = document.body; // 取 <body> 物件
element = body.firstChild; // 取 <body> 內第一個子物件
// firstChild returns 第一個子物件
// lastChild returns 最後一個子物件
// parent returns 母物件
var text = '';
while (text != "") {
// 物件可以是<!--註釋-->、元素、文字等等
// 用 NodeType 查，常見的有
// ELEMENT_NODE 1 元素
// TEXT_NODE 3 文字
// COMMENT_NODE 8 註釋
if (element.NodeType == ELEMENT_NODE) {
// 是元素。為求簡潔，走個捷徑
// innerText 代表元素內文字
text = element.innerText;
break;
}
if (element.NodeType == TEXT_NODE) {
// nodeValue 指節點(物件)的值。
// 文字節點的值就是文字。
// 註：nodeValue 是 read only
text = element.nodeValue;
break;
}
// 在 <body> 中後面屬同層的物件;
// (要前面的同層物件則用 previousSibling;)
element = element.nextSibling;
}// end while
設內容
對簡單的 script，firstChild、nextSibling 的有點煩。用 innerText 與 innerHTML 有時比較快
代碼:
// 取代內部所有的 HTML
element.innerHTML = "<strong>text</strong>";
// 取代內部所有的文字
element.innerText = "hi";
建立物件
用 innerText 或 innerHTML 雖然簡單，可是對複雜，物件/文字一個一個加入或刪除的 script 不適用
代碼:
// 建立新的 <p> 元素
newP = document.createElement("P");
// 建立新的文字
newText = document.createTextNode("hello world");
// 把文字加到新的 <p> 元素內
// 這些物件還不會出現
newP.appendChild(newText);
// 加到 <body> 內後才會出現
document.body.appendChild(newP);
登入
註冊
問答集
搜尋
