網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對(duì)象模型-DOM與CSS_第1頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對(duì)象模型-DOM與CSS_第2頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對(duì)象模型-DOM與CSS_第3頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對(duì)象模型-DOM與CSS_第4頁
網(wǎng)頁設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：JavaScript對(duì)象模型-DOM與CSS_第5頁
已閱讀5頁，還剩25頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

DOM（DocumentObjectModel，文檔對(duì)象模型）是W3C標(biāo)準(zhǔn)，定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。

JavaScript對(duì)象模型DOM與CSS目錄

JavaScript對(duì)象模型9.1BOM的對(duì)象9.2DOM的對(duì)象9.3DOM與CSS習(xí)題99.3DOM與CSS9.3.1style對(duì)象使用style對(duì)象屬性的格式為：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對(duì)象的Background屬性見表。9.3DOM與CSS2．Border和Margin屬性style對(duì)象的Border和Margin屬性見表9-20。9.3DOM與CSS9.3DOM與CSS3．Layout屬性style對(duì)象的Layout屬性見表。9.3DOM與CSS9.3DOM與CSS4．List屬性style對(duì)象的List屬性見表。9.3DOM與CSS5．Positioning屬性style對(duì)象的Positioning屬性見表。9.3DOM與CSS6．Table屬性style對(duì)象的Table屬性見表。9.3DOM與CSS7．Text屬性style對(duì)象的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對(duì)象獲得CSS的屬性值。當(dāng)頁面載入后，單擊“請(qǐ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);//沒有這個(gè)值，為空白

}}</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="請(qǐng)單擊本按鈕"/></body></html>9.3DOM與CSS9.3.2currentStyle對(duì)象其格式如下：varostyle=window.getComputedStyle(element[,psevdo-element])9.3DOM與CSS【例9-15】currentStyle對(duì)象的使用，顯示樣式屬性值。本例文件9-15.html在瀏覽器中顯示如圖9-17所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>currentStyle對(duì)象</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)先級(jí)高

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

<body><pid="p1">段落文本</p><inputtype="button"id="btn"value="請(qǐng)單擊本按鈕"/></body></html>9.3DOM與CSS9.3.3CSSStyleSheet對(duì)象CSSStyleRule對(duì)象的常用屬性見表。9.3DOM與CSSCSSStyleRule對(duì)象的常用方法見表。9.3DOM與CSS【例9-17】通過cssRules屬性獲取樣式表對(duì)象中所有的規(guī)則。當(dāng)頁面載入后，單擊“查看效果”按鈕，將顯示div元素樣式。本例文件9-17.html在瀏覽器中顯示如圖9-19所示。9.3DOM與CSS<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>styleSheet對(duì)象</title><styletype="text/css">div{text-align:center;background-color:yellow;font-size:12px;}#ant{width:300px;height:100px;}</style><scripttype="text/javascript">window.onload=function(){varodiv=document.getElementById("ant");varobt=document.getElementById("bt");varstyleSheet=document.styleSheets[0];obt.onclick=function(){odiv.innerHTML=

溫馨提示

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

評(píng)論

0/150

提交評(píng)論