網(wǎng)頁設(shè)計與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對象模型_第1頁
網(wǎng)頁設(shè)計與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對象模型_第2頁
網(wǎng)頁設(shè)計與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對象模型_第3頁
網(wǎng)頁設(shè)計與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對象模型_第4頁
網(wǎng)頁設(shè)計與制作教程-Web前端開發(fā) 第7版 課件 第9章 JavaScript對象模型_第5頁
已閱讀5頁，還剩102頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

BOM（BrowserObjectModel）是指瀏覽器對象模型，瀏覽器對象模型提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。第9章JavaScript對象模型9.1BOM的對象目錄第9章JavaScript對象模型9.1BOM的對象9.2DOM的對象9.3DOM與CSS習(xí)題99.1BOM的對象9.1.1BOM概述瀏覽器對象關(guān)系的如圖所示。9.1BOM的對象9.1.2window對象1.window對象的屬性9.1BOM的對象2.window對象的方法9.1BOM的對象【例9-1】顯示窗口的寬、高和設(shè)置計時器，頁面初次加載時依次顯示3個的提示框，延時5000ms后再調(diào)用hello()函數(shù)，顯示其對話框，本例文件9-1.html在瀏覽器中顯示的效果，如圖所示。9.1BOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">functionhello(){window.alert("歡迎您！");}

window.setTimeout(hello,9000);//延時9000ms后再調(diào)用hello()函數(shù)

window.alert("窗口的寬="+window.innerWidth);//獲得窗口的寬度

window.alert("窗口的高="+window.innerHeight);//獲得窗口的高度

mpt("mpt()","默認(rèn)文本");//js中的提示輸入框

</script></head><body></body></html>9.1BOM的對象9.1.3document對象1.document對象的屬性9.1BOM的對象2.document對象的方法9.1BOM的對象【例9-2】使用getElementById()、getElementsByName()、getElementsByTagName()方法操作文檔中的元素。瀏覽者填寫表單中的選項后，單擊“統(tǒng)計結(jié)果”按鈕，彈出消息框顯示統(tǒng)計結(jié)果，本例文件9-2.html在瀏覽器中的顯示效果，如圖所示。9.1BOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>document對象</title><scripttype="text/javascript">functioncount(){varuserName=document.getElementById("userName");varhobby=document.getElementsByName("hobby");varinputs=document.getElementsByTagName("input");varresult="ID為userName的元素的值："+userName.value+"\nname為hobby的元素的個數(shù)："+hobby.length+"\n個人愛好：";for(vari=0;i<hobby.length;i++){if(hobby[i].checked){result+=hobby[i].value+"";}

}

9.1BOM的對象result+="\n標(biāo)簽為input的元素的個數(shù)："+inputs.length;alert(result);}</script></head><body><formname="myform">

用戶名：<inputtype="text"name="userName"id="userName"><br>

愛好：<inputtype="checkbox"name="hobby"value="音樂">音樂

<inputtype="checkbox"name="hobby"value="美食">美食

<inputtype="checkbox"name="hobby"value="旅游">旅游<br><inputtype="button"value="統(tǒng)計結(jié)果"onclick="count()"></form></body></html>

9.1BOM的對象9.1.4location對象1.location對象的屬性9.1BOM的對象2.location對象的方法9.1BOM的對象【例9-3】下面代碼通過location.href屬性獲得當(dāng)前頁面的URL鏈接，然后重定向并打開百度主頁。本例文件9-3.html在瀏覽器中顯示如圖9-4所示。<scripttype="text/javascript">window.onload=function(){alert(location.href);location.replace("");}</script>9.1BOM的對象9.1.5navigator對象9.1BOM的對象【例9-4】navigator.userAgent是最常用的屬性，用來完成瀏覽器判斷；然后返回客戶端瀏覽器的各種信息。本例文件9-4.html在瀏覽器中顯示如圖9-5所示。9.1BOM的對象<scripttype="text/javascript">if(window.navigator.userAgent.indexOf('MSIE')!=-1){alert('我是IE');}else{alert('我不是IE');}document.write(navigator.appName+"<br>");//返回運行瀏覽器的名稱

document.write(navigator.appVersion+"<br>");//返回運行瀏覽器的平臺和版本信息

document.write(navigator.cookieEnabled+"<br>");//返回瀏覽器中是否啟用cookie的布爾值

document.write(navigator.platform+"<br>");//返回運行瀏覽器的操作系統(tǒng)平臺</script>9.1BOM的對象9.1.6screen對象9.1BOM的對象【例9-5】下面代碼顯示瀏覽器顯示屏幕的寬度和高度、顯示器屏幕的寬度和高度，本例文件9-5.html在瀏覽器中顯示如圖9-6所示，可以看到瀏覽器屏幕的高度與顯示器的高度相差一個Windows任務(wù)欄的高度。<scripttype="text/javascript">document.write(screen.availHeight+"<br>");//返回客戶端瀏覽器顯示屏幕的高度

document.write(screen.availWidth+"<br>");//返回瀏覽器顯示屏幕的寬度

document.write(screen.height+"<br>");//返回顯示器的高度

document.write(screen.width+"<br>");//返回顯示器的寬度</script>9.1BOM的對象9.1BOM的對象9.1.7history對象9.1BOM的對象例如，下面代碼在網(wǎng)頁中顯示網(wǎng)頁鏈接的數(shù)量，請輸入幾個網(wǎng)站后，返回到這個例子，鏈接數(shù)量將改變。document.write(history.length+"<br>");//初始時，該值為1history.back();//后退一頁//history.forward();//前進一頁//history.go(-1);//后退一頁//history.go(1);//前進一頁//history.go(2);//前進兩頁祝賀你完成了這一節(jié)的學(xué)習(xí)《網(wǎng)頁設(shè)計與制作教程Web前端開發(fā)第7版》劉瑞新主編配套資源DOM（DocumentObjectModel，文檔對象模型）是W3C標(biāo)準(zhǔn)，定義了用于HTML的一系列標(biāo)準(zhǔn)的對象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。第9章JavaScript對象模型9.2DOM的對象目錄第9章JavaScript對象模型9.1BOM的對象9.2DOM的對象9.3DOM與CSS習(xí)題99.2DOM的對象9.2.1節(jié)點和節(jié)點樹1.節(jié)點DOM把HTML文檔中的每一個元素都定義成一個一個的節(jié)點，整個HTML文檔是一個文檔節(jié)點，根元素<html>是根節(jié)點。每個HTML標(biāo)簽都是一個元素節(jié)點，包含在HTML標(biāo)簽中的文本內(nèi)容是文本節(jié)點；HTML標(biāo)簽的每一個屬性是一個屬性節(jié)點。注釋屬于注釋節(jié)點。9.2DOM的對象2.節(jié)點樹DOM對象被結(jié)構(gòu)化為對象樹，HTML文檔的所有節(jié)點組成一個節(jié)點樹，HTML文檔中的每個元素、屬性和文本內(nèi)容等都代表樹中的一個節(jié)點。例如，下面HTML文檔，代碼如下：<!DOCTYPEhtml><!--文檔節(jié)點--><html><!--<html>是元素節(jié)點--><head><!--<head>是元素節(jié)點-->

<metacharset="utf-8"><!--<meta>是元素節(jié)點，其中的charset是屬性節(jié)點-->

<title>文檔標(biāo)題</title><!--<title>是元素節(jié)點，其中的“文檔標(biāo)題”是文本節(jié)點--></head><body><!--<body>是元素節(jié)點--><ahref="#">鏈接文字</a><!--<a>是元素節(jié)點，其中的href是屬性節(jié)點，“鏈接文字”是文本節(jié)點-->

<h1>標(biāo)題1</h1><!--<h1>是元素節(jié)點，其中的“標(biāo)題1”是文本節(jié)點--><p>段落文本</p><!--<p>是元素節(jié)點，其中的“段落文本”是文本節(jié)點--></body></html>9.2DOM的對象上面代碼構(gòu)成的節(jié)點樹，如圖所示。9.2DOM的對象9.2.2DOM的操作由于HTML文檔被瀏覽器解析后是一棵DOM樹，是一個樹形結(jié)構(gòu)。要改變HTML的結(jié)構(gòu)，就需要通過JavaScript來操作DOM。操作一個DOM節(jié)點就是以下幾個操作：添加。刪除。更新。遍歷。9.2DOM的對象9.2.3Node對象Node（節(jié)點）對象代表文檔樹中的一個節(jié)點，Node對象是整個DOM的核心對象。1.Node對象的屬性每個節(jié)點都有其節(jié)點的屬性，Node對象的常用屬性見表。9.2DOM的對象9.2DOM的對象（1）nodeNamenodeName屬性含有某個節(jié)點的名稱，其中：1）元素節(jié)點的nodeName值是標(biāo)簽名稱。2）屬性節(jié)點的nodeName值是屬性名稱。3）文本節(jié)點的nodeName值永遠(yuǎn)是#text。4）文檔節(jié)點的nodeName值永遠(yuǎn)是#document。9.2DOM的對象（2）nodeValue對于文本節(jié)點，nodeValue屬性包含文本內(nèi)容。對于屬性節(jié)點，nodeValue屬性包含屬性值。對于文檔節(jié)點和元素節(jié)點，nodeValue屬性不可用。9.2DOM的對象（3）nodeTypenodeType屬性返回節(jié)點的類型，其中最重要的節(jié)點類型見表。9.2DOM的對象2.Node對象的方法Node對象的方法包含對節(jié)點的各種操作。9.2DOM的對象9.2.4HTMLDOM對象HTMLDOM是HTML的標(biāo)準(zhǔn)對象模型和編程接口。它定義了：作為對象的HTML元素；所有HTML元素的屬性；訪問所有HTML元素的方法；所有HTML元素的事件。換言之，HTMLDOM是關(guān)于如何獲取、更改、添加或刪除HTML元素的標(biāo)準(zhǔn)。9.2DOM的對象HTMLDOM獨立于平臺和編程語言，它可被任何編程語言（如Java、JavaScript和VBScript）使用。HTMLDOM對象見表。9.2DOM的對象9.2DOM的對象9.2.5HTMLDocument對象HTMLDocument對象表示HTML文檔樹的根，在BOM和HTMLDOM中被稱為Document對象。每個載入瀏覽器的HTML文檔都會成為Document對象。Document對象可以用腳本對HTML頁面中的所有元素進行訪問。9.2DOM的對象1.HTMLDocument對象的集合HTMLDocument對象的常用集合見表。9.2DOM的對象2.HTMLDocument對象的屬性HTMLDocument對象的常用屬性，見表。9.2DOM的對象3.HTMLDocument對象的方法HTMLDocument對象的常用方法見表。9.2DOM的對象9.2.6HTMLElement對象在HTMLDOM中，HTMLElement對象表示HTML文檔中的任意元素，它是HTMLDOM的基本對象，提供HTML元素對象的通用屬性和方法。Element對象可以擁有類型為元素節(jié)點、文本節(jié)點、注釋節(jié)點的子節(jié)點。NodeList對象表示節(jié)點列表，比如HTML元素的子節(jié)點集合。元素也可以擁有屬性。屬性是屬性節(jié)點。HTMLElement對象繼承了Node和Element對象的標(biāo)準(zhǔn)屬性和方法，也實現(xiàn)了非標(biāo)準(zhǔn)屬性。9.2DOM的對象1.HTMLElement對象的屬性表列出了HTMLElement對象的常用屬性，表中的屬性可用于所有HTML元素上。9.2DOM的對象2.HTMLElement對象的方法HTMLElement對象的常用方法見表。9.2DOM的對象9.2.7Node操作實例1.獲取節(jié)點（1）通過標(biāo)簽的id獲取document.getElementById('id屬性值')（2）通過標(biāo)簽name屬性獲取document.getElementsByName('name屬性值')9.2DOM的對象（3）通過class類別名獲取document.getElementsByClassName('class屬性值')（4）通過標(biāo)簽名獲取document.getElementsByTagName('標(biāo)簽名')9.2DOM的對象【例9-6】Node對象是用于解析DOM節(jié)點樹的入口，Node對象提供了對節(jié)點操作的屬性和方法。本例使用Node對象的屬性顯示節(jié)點信息。本例文件9-6.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>顯示屬性值</title></head><body><pid="p1"name="text">我來自何方</p><scripttype="text/javascript">/*獲取指定元素節(jié)點*/varp=document.getElementById('p1');/*判斷指定節(jié)點的名稱-顯示標(biāo)簽名稱*/document.write(p.nodeName+"<br/>");//顯示大寫:P/*判斷指定節(jié)點的類型*/document.write(p.nodeType+"<br/>");//顯示元素節(jié)點:1/*判斷指定節(jié)點的屬性值*/document.write(p.nodeValue+"<br/>");//顯示:null/*獲取指定元素節(jié)點的文本節(jié)點*/vartext=p.firstChild;/*判斷指定節(jié)點的名稱*/document.write(text.nodeName+"<br/>");//顯示文本節(jié)點的固定寫法:#text/*判斷指定節(jié)點的類型*/document.write(text.nodeType+"<br/>");//顯示文本節(jié)點:39.2DOM的對象/*判斷指定節(jié)點的屬性值*/document.write(text.nodeValue+"<br/>");//顯示文本內(nèi)容:我來自何方/*獲取指定元素節(jié)點的屬性節(jié)點*/varmyAttr=p.getAttributeNode('name');/*判斷指定節(jié)點的名稱*/document.write(myAttr.nodeName+"<br/>");//顯示屬性名:name/*判斷指定節(jié)點的類型*/document.write(myAttr.nodeType+"<br/>");//顯示屬性節(jié)點:2/*判斷指定節(jié)點的屬性值*/document.write(myAttr.nodeValue+"<br/>");//顯示屬性值:text/*判斷節(jié)點的類型-文檔節(jié)點*///document對象表示html文檔（html頁面）document.write(document.nodeName+"<br/>");//顯示節(jié)點的名稱:#document（document對象）document.write(document.nodeType+"<br/>");//顯示節(jié)點的類型:9（文檔節(jié)點）document.write(document.nodeValue+"<br/>");//顯示節(jié)點的值:null</script></body></html>9.2DOM的對象2.創(chuàng)建或增添節(jié)點（1）創(chuàng)建節(jié)點創(chuàng)建節(jié)點使用下面方法。document.createElement("HTML元素名")//創(chuàng)建一個HTML元素document.createTextNode(String)//創(chuàng)建一個文本節(jié)點document.createAttribute("屬性名")//創(chuàng)建一個屬性節(jié)點9.2DOM的對象（2）增添節(jié)點增添節(jié)點使用下面方法。1）向element內(nèi)部最后添加（追加）一個節(jié)點，參數(shù)是節(jié)點類型：element.appendChild(Node)2）在element內(nèi)部的existingNode前插入newNode：element.insertBefore(newNode,existingNode)9.2DOM的對象【例9-7】本例創(chuàng)建新的HTML元素p節(jié)點，使用appendChild()方法添加新元素到尾部；然后在已存在的元素div1中添加它。本例文件9-7.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>創(chuàng)建新的HTML元素(節(jié)點)-appendChild()</title></head><body><divid="div1"><pid="p1">這是第一個段落。</p><pid="p2">這是第二個段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");//創(chuàng)建p元素

varnode=document.createTextNode("這是一個新的段落。");//為<p>元素創(chuàng)建一個新的文本節(jié)點

para.appendChild(node);//將文本節(jié)點添加到<p>元素中

varelement=document.getElementById("div1");//查找已存在的元素div1element.appendChild(para);//添加到已存在的元素中

</script></body></html>9.2DOM的對象【例9-8】本例創(chuàng)建新的HTML元素(節(jié)點)，使用insertBefore()方法將新元素添加到指定位置。本例文件9-8.html在瀏覽器中顯示如圖所示9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>創(chuàng)建新的HTML元素(節(jié)點)-appendChild()</title></head><body><divid="div1"><pid="p1">這是第一個段落。</p><pid="p2">這是第二個段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");//創(chuàng)建p元素varnode=document.createTextNode("這是一個新的段落。");//為<p>元素創(chuàng)建文本節(jié)點para.appendChild(node);//將文本節(jié)點添加到<p>元素中varelement=document.getElementById("div1");//查找已存在的元素div1varchild=document.getElementById("p2");//查找已存在的元素p2element.insertBefore(para,child);//把新建的元素插入到p2前</script></body></html>9.2DOM的對象3.刪除（移除）節(jié)點刪除節(jié)點使用下面方法：element.removeChild(Node)本方法的功能是刪除當(dāng)前節(jié)點下指定的子節(jié)點，刪除成功返回該被刪除的節(jié)點，否則返回null。9.2DOM的對象【例9-9】HTML文檔中<div>元素包含兩個子節(jié)點（兩個<p>元素），刪除第一個段落。本例文件9-9.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>移除第一個段落</title></head><body><divid="div1"><pid="p1">這是第一個段落。</p><pid="p2">這是第二個段落。</p></div><scripttype="text/javascript">varparent=document.getElementById("div1");//查找id="div1"的元素，父元素

varchild=document.getElementById("p1");//查找id="p1"的<p>元素

parent.removeChild(child);//從父元素中移除子節(jié)點p1</script></body></html>9.2DOM的對象4.替換HTML元素可以使用replaceChild()方法來替換HTMLDOM中的元素。parent.replaceChild(para,child);【例9-10】本例用新段落替換第一個段落。本例文件9-10.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>替換HTML元素-replaceChild()</title></head><body><divid="div1"><pid="p1">這是第一個段落。</p><pid="p2">這是第二個段落。</p></div><scripttype="text/javascript">varpara=document.createElement("p");varnode=document.createTextNode("這是一個新的段落。");para.appendChild(node);varparent=document.getElementById("div1");varchild=document.getElementById("p1");parent.replaceChild(para,child);</script></body></html>9.2DOM的對象5.獲取或設(shè)置元素的屬性值對獲取的節(jié)點，可以得到節(jié)點的屬性值，也可以設(shè)置節(jié)點的屬性值。其語法格式如下：節(jié)點對象名.getAttribute(attributeName)節(jié)點對象名.setAttribute(attributeName,attributeValue)9.2DOM的對象【例9-11】本例定義了一個文本節(jié)點和元素節(jié)點，并為一級標(biāo)題元素設(shè)置title屬性，最后把它們添加到文檔結(jié)構(gòu)中。本例文件9-11.html在瀏覽器中的顯示效果，如圖所示。9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><scripttype="text/javascript">window.onload=function(){varhello=document.createTextNode("HelloWorld!");//創(chuàng)建一個文本節(jié)點varh1=document.createElement("h1");//創(chuàng)建一個一級標(biāo)題h1.setAttribute("title","你好，歡迎光臨！");//為一級標(biāo)題定義title屬性h1.appendChild(hello);//把文本節(jié)點增加到一級標(biāo)題中document.body.appendChild(h1);//把一級標(biāo)題增加到文檔}</script></head><body><p>ppp</p></body></html>9.2DOM的對象【例9-12】修改節(jié)點列表中所有<p>元素的背景顏色。本例文件9-12.html在瀏覽器中顯示如圖所示。9.2DOM的對象<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTMLDOM集合(Collection)</title></head><body><h2>JavaScriptHTMLDOM!</h2><p>HelloWorld!</p><p>你好!</p><p>點擊按鈕修改所有p元素的背景顏色。</p><buttononclick="myFunction()">點我</button><scripttype="text/javascript">functionmyFunction(){varmyCollection=document.getElementsByTagName("p");vari;for(i=0;i<myCollection.length;i++){myCollection[i].style.color="red";}}</script></body></html>《網(wǎng)頁設(shè)計與制作教程-Web前端開發(fā)（第7版）》劉瑞新主編配套資源自由思想，獨立思考DOM（DocumentObjectModel，文檔對象模型）是W3C標(biāo)準(zhǔn)，定義了用于HTML的一系列標(biāo)準(zhǔn)的對象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。第9章JavaScript對象模型9.3DOM與CSS目錄第9章JavaScript對象模型9.1BOM的對象9.2DOM的對象9.3DOM與CSS習(xí)題99.3DOM與CSS9.3.1style對象使用style對象屬性的格式為：document.getElementById("id").style.屬性名="新樣式值"例如，下面代碼獲取的樣式是內(nèi)聯(lián)樣式的值：<styletype="text/css">//內(nèi)部樣式

#div{color:gray;}</div><divid="div"style="color:red;"></div>//內(nèi)聯(lián)樣式document.getElementById('id').style.color;//值為red9.3DOM與CSS1．Background屬性style對象的Background屬性見表。9.3DOM與CSS2．Border和Margin屬性style對象的Border和Margin屬性見表9-20。9.3DOM與CSS9.3DOM與CSS3．Layout屬性style對象的Layout屬性見表。9.3DOM與CSS9.3DOM與CSS4．List屬性style對象的List屬性見表。9.3DOM與CSS5．Positioning屬性style對象的Positioning屬性見表。9.3DOM與CSS6．Table屬性style對象的Table屬性見表。9.3DOM與CSS7．Text屬性style對象的Text屬性見表。9.3DOM與CSS9.3DOM與CSS【例9-13】本例改變<p>元素的樣式。本例文件9-13.html在瀏覽器中顯示如圖9-15所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTMLDOM-改變CSS</title></head><body><pid="p1">HelloWorld!</p><pid="p2">HelloWorld!</p><scripttype="text/javascript">document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="30px";</script><p>以上段落通過腳本修改。</p></body></html>9.3DOM與CSS【例9-14】本例通過style對象獲得CSS的屬性值。當(dāng)頁面載入后，單擊“請單擊本按鈕”，將在消息框中顯示CSS值。本例文件9-14.html在瀏覽器中顯示如圖9-16所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>得到CSS值</title><scripttype="text/javascript">window.onload=function(){document.getElementById("btn").onclick=function(){alert(document.getElementById("mycss").style.width);//200alert(document.getElementById("mycss").style.background);//greenyellowalert(document.getElementById("mycss").style.color);//沒有這個值，為空白

}}</script></head>9.3DOM與CSS<body><divid="mycss"class="ss"style="width:200px;height:100px;background:greenyellow">JS獲取CSS屬性值</div><inputtype="button"id="btn"value="請單擊本按鈕"/></body></html>9.3DOM與CSS9.3.2currentStyle對象其格式如下：varostyle=window.getComputedStyle(element[,psevdo-element])9.3DOM與CSS【例9-15】currentStyle對象的使用，顯示樣式屬性值。本例文件9-15.html在瀏覽器中顯示如圖9-17所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle對象</title><styletype="text/css">#myDiv{background-color:blue;width:200px;height:100px;}</style></head>9.3DOM與CSS<body><divid="myDiv"style="background-color:red;border:1pxsolidblack"></div><scripttype="text/javascript">varmyDiv=document.getElementById("myDiv");varcomputedStyle=document.defaultView.getComputedStyle(myDiv,null);alert(computedStyle.backgroundColor);//"red"，因內(nèi)嵌樣式優(yōu)先級高

alert(computedStyle.width);//"200px"alert(computedStyle.height);//"100px"alert(computedStyle.border);//在某些瀏覽器中是“1pxsolidblack”</script></body></html>9.3DOM與CSS【例9-16】currentStyle對象的使用。當(dāng)頁面載入后，單擊“請單擊本按鈕”，將在消息框中顯示段落字體的大小。本例文件9-16.html在瀏覽器中顯示如圖9-18所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle對象</title><scripttype="text/javascript">window.onload=function(){document.getElementById("btn").onclick=function(){varop=document.getElementById("p1");varocurrentStyle=window.getComputedStyle(op,null);alert(ocurrentStyle.fontSize);

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論