JavaScript+jQuery交互式Web前端開發（第2版） 課件 第6章 DOM（上）_第1頁
JavaScript+jQuery交互式Web前端開發（第2版） 課件 第6章 DOM（上）_第2頁
JavaScript+jQuery交互式Web前端開發（第2版） 課件 第6章 DOM（上）_第3頁
JavaScript+jQuery交互式Web前端開發（第2版） 課件 第6章 DOM（上）_第4頁
JavaScript+jQuery交互式Web前端開發（第2版） 課件 第6章 DOM（上）_第5頁
已閱讀5頁，還剩97頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第6章DOM（上）《JavaScript+jQuery交互式Web前端開發（第2版）》學習目標/Target

了解WebAPI的概念，能夠闡述WebAPI的作用了解什么是DOM，能夠描述DOM中文檔、元素和節點的關系

掌握獲取元素的方法，能夠根據不同場景選擇合適的方法獲取元素

了解事件的概念，能夠描述事件的3個要素學習目標/Target

掌握事件的注冊，能夠為頁面中的元素注冊事件

掌握操作元素內容的方法，能夠根據不同場景選擇合適的方法操作元素內容

掌握操作元素屬性的方法，能夠根據不同場景選擇合適的方法操作元素屬性

掌握操作元素樣式的方法，能夠根據不同場景選擇合適的方法操作元素樣式章節概述/Summary通過第1~5章的學習，相信讀者已經掌握了JavaScript的基礎知識。在實際開發過程中，若要實現網頁交互效果，僅僅掌握JavaScript的基礎知識是不夠的，還需要進一步學習WebAPI的相關知識。在本階段主要學習使用DOM和BOM實現網頁交互效果，由于DOM和BOM的知識內容較多，所以本章首先對DOM（上）的基本知識進行講解，關于DOM（下）和BOM的相關知識將在后續章節中講解。目錄/Contents6.16.26.3WebAPI簡介DOM簡介獲取元素6.4事件基礎6.5操作元素WebAPI簡介6.1了解WebAPI的概念，能夠闡述WebAPI的作用6.1WebAPI簡介

先定一個小目標！API（ApplicationProgramInterface，應用程序接口）是軟件系統預先定義的接口，用于軟件系統不同組成部分的銜接。WebAPI是指在Web開發中用到的API。6.1WebAPI簡介例如，開發一個美顏相機手機應用，該手機應用需要使用手機上的攝像頭拍攝畫面，手機的操作系統需要將訪問攝像頭的功能開放給手機應用，為此，手機操作系統提供了攝像頭API，手機應用通過攝像頭API就可以獲得訪問攝像頭的功能。6.1WebAPI簡介在JavaScript中，WebAPI被封裝成對象，用于幫助開發者實現某種功能。開發人員無須訪問對象源代碼，也無須理解對象內部工作機制和細節，只需要掌握如何使用對象的屬性和方法。例如，在程序中，經常使用console.log()輸出一些信息，其中，console就是WebAPI對象，用于操作控制臺，log()方法用于在控制臺輸出信息。DOM和BOM都包含一系列對象，這些對象都屬于WebAPI。6.1WebAPI簡介DOM簡介6.2了解什么是DOM，能夠描述DOM中文檔、元素和節點的關系

先定一個小目標！6.2DOM簡介DOM（DocumentObjectModel，文檔對象模型）是W3C組織制定的用于處理HTML文檔和XML文檔的編程接口。在網頁開發中，DOM扮演著非常重要的角色，使用DOM可以獲取元素、操作元素的內容、屬性和樣式等，從而實現豐富多彩的網頁交互效果。6.2DOM簡介DOM將整個文檔視為樹形結構，這個結構被稱為文檔樹。頁面中所有的內容在文檔樹中都是節點（Node），所有的節點都會被看作是對象，這些對象都擁有屬性和方法。6.2DOM簡介節點有多種類型，常見的類型及解釋如下。元素節點：代表頁面中的標簽。例如，<div>標簽屬于元素節點，通常稱為div元素或div節點。文本節點：代表頁面中的文本內容。例如，“<div>內容</div>”中的“內容”屬于文本節點。注釋節點：代表頁面中的注釋。例如，“<!--注釋-->”屬于注釋節點。文檔節點：代表整個文檔。文檔類型節點：代表文檔的類型定義。例如，“<!DOCTYPEhtml>”屬于文檔類型節點。6.2DOM簡介不同節點之間的關系可以用傳統的家族關系進行描述，例如，父子關系、兄弟關系，通過這些關系可以將節點劃分為不同層級，具體如下。父節點：是指某一節點的上級節點。子節點：是指某一節點的下級節點。兄弟節點：是指同一個父節點的兩個子節點。根節點：document節點是整個文檔的根節點。根節點是文檔樹中唯一沒有父節點的節點，所有其他節點都是根節點的后代。6.2DOM簡介如果一個節點的父節點、子節點或兄弟節點是元素節點，則可以將其稱為父元素、子元素或兄弟元素。根元素對應的標簽為<html>標簽。下面演示一個簡單的文檔樹示例，如下圖所示。6.2DOM簡介節點對象有3個常用的屬性，具體解釋如下。nodeType屬性：用于獲取數字表示的節點類型。1表示元素節點，3表示文本節點、8表示注釋節點、9表示文檔節點，10表示文檔類型節點。nodeName屬性：用于獲取節點名稱。nodeValue屬性：用于獲取節點值，適用于文本節點、注釋節點。6.2DOM簡介獲取元素6.3掌握根據id屬性獲取元素的方法，能夠根據getElementById()方法獲取元素6.3.1 根據id屬性獲取元素

先定一個小目標！在HTML中，為元素設置id屬性可以作為元素設置唯一標識。document對象提供了getElementById()方法，用于根據id屬性獲取元素，該方法的語法格式如下。document.getElementById(id)上述語法格式中，參數id表示id屬性值。在調用getElementById()方法后會返回一個元素對象，這個元素對象就是根據id屬性獲取的目標元素。若沒有找到指定id屬性的元素，則返回null。6.3.1 根據id屬性獲取元素6.3.1 根據id屬性獲取元素下面通過代碼演示getElementById()方法的使用。<body>

<ul>

<liid="menu">家居</li>

<li>美妝</li>

<li>食品</li>

</ul>

<script>

//根據id屬性獲取元素

varObox=document.getElementById('menu');

console.log(Obox);

</script></body>

先定一個小目標！6.3.2 根據標簽名獲取元素掌握根據標簽名獲取元素的方法，能夠根據getElementsByTagName()方法獲取元素在實際開發中，有時需要獲取多個元素，而getElementById()方法一次只能獲取一個元素，當要獲取多個元素時，操作比較煩瑣。為此，document對象還提供了一種通過標簽名獲取元素的方法，即getElementsByTagName()方法，該方法的語法格式如下。document.getElementsByTagName(name)上述語法格式中，參數name表示標簽名。在使用getElementsByTagName()方法時，只需將標簽名作為參數傳入即可。由于具有相同標簽名的元素可能有多個，所以該方法的返回結果不是單個元素對象，而是一個集合。6.3.2 根據標簽名獲取元素下面通過代碼演示getElementsByTagName()方法的使用。<body>

<ul>

<li>家居</li>

<li>美妝</li>

<li>食品</li>

</ul>

<script>

//根據標簽名獲取元素

varlist=document.getElementsByTagName('li');

console.log(list);

</script></body>6.3.2 根據標簽名獲取元素需要注意的是，getElementsByTagName()方法返回的集合與數組的使用方法類似，但是它本質上并不是數組。為了證明這一點，可以通過在前面示例代碼的第10行代碼下方添加如下代碼進行驗證。

console.log(Array.isArray(list)); //輸出結果為：false6.3.2 根據標簽名獲取元素上述運行代碼后，控制臺輸出的結果為false，說明調用getElementsByTagName()方法后返回的結果不是數組。這種類似數組但不是數組的數據稱為類數組（array-like）對象，類數組對象可以像數組一樣通過索引訪問元素，但不能使用數組的方法。6.3.2 根據標簽名獲取元素需要注意的是，即使頁面中只有一個li元素，getElementsByTagName()方法返回的結果仍然是一個集合，如果頁面中沒有該元素，那么將返回一個空集合。通過getElementsByTagName()方法獲取到的集合是動態集合，當頁面增加標簽時，在該集合中也會自動增加元素。

先定一個小目標！6.3.3 根據name屬性獲取元素掌握根據name屬性獲取元素的方法，能夠根據getElementsByName()方法獲取元素在實際開發中，經常需要編寫表單頁面的交互邏輯代碼，此時就需要獲取表單元素。表單元素通過name屬性設置元素名稱，為了通過name屬性獲取表單元素，document對象提供了getElementsByName()方法，該方法的語法格式如下。document.getElementsByName(name)上述語法格式中，參數name表示name屬性值。在使用getElementsByName()方法時，只需將name屬性值作為參數傳入即可，由于name屬性的值不要求必須唯一，多個元素可以有相同的名稱，如表單中的單選框和復選框等，所以該方法的返回結果不是單個元素對象，而是一個集合。6.3.3 根據name屬性獲取元素下面通過代碼演示getElementsByName()方法的使用。6.3.3 根據name屬性獲取元素<body>

<p>請選擇你最喜歡的水果（多選）</p>

<inputtype="checkbox"name="fruit"value="草莓">草莓

<inputtype="checkbox"name="fruit"value="雪梨">雪梨

<inputtype="checkbox"name="fruit"value="芒果">芒果

<script>

varfavoriteFruit=document.getElementsByName('fruit');

console.log(favoriteFruit);

console.log(favoriteFruit[2]);

</script></body>

先定一個小目標！6.3.4 根據類名獲取元素掌握根據類名獲取元素的方法，能夠根據getElementsByClassName()方法獲取元素如果需要根據類名獲取元素，可以在頁面中為元素設置類名，然后使用document對象提供的getElementsByClassName()方法獲取元素，該方法的語法格式如下。document.getElementsByClassName(names)上述語法格式中，參數names表示要匹配的類名列表，多個類名之間使用空格分隔。需要說明的是，一些舊版本的瀏覽器（如IE6~IE8）不支持getElementsByClassName()方法。6.3.4 根據類名獲取元素下面通過代碼演示getElementsByClassName()方法的使用。<body>

<ul>

<liclass="girl">小花</li>

<liclass="girl">小紅</li>

<liclass="boy">小智</li>

<liclass="boy">小強</li>

</ul>

<script>

vargirlStudent=document.getElementsByClassName('girl');

varboyStudent=document.getElementsByClassName('boy');

console.log(girlStudent[0]);

console.log(boyStudent[0]);

</script></body>6.3.4 根據類名獲取元素

先定一個小目標！6.3.5 根據CSS選擇器獲取元素掌握根據CSS選擇器獲取元素的方法，能夠根據querySelector()方法和querySelectorAll()方法獲取元素在DOM中，還可以根據CSS選擇器獲取元素。document對象提供了querySelector()方法和querySelectorAll()方法獲取目標元素，這兩個方法的語法格式如下。document.querySelector(selectors)document.querySelectorAll(selectors)上述語法格式中，參數selectors表示CSS選擇器。querySelector()方法的使用方式和querySelectorAll()方法的使用方式相似，只需將CSS選擇器作為參數傳入即可。這兩個方法的區別是，querySelector()方法返回指定CSS選擇器的第一個元素對象，querySelectorAll()方法返回指定CSS選擇器的所有元素對象集合。6.3.5 根據CSS選擇器獲取元素在使用querySelector()方法和querySelectorAll()方法時，要注意IE瀏覽器的兼容問題，這兩個方法從IE9才開始被完整支持。6.3.5 根據CSS選擇器獲取元素下面通過代碼演示querySelector()方法和querySelectorAll()方法的使用。<body>

<divclass="book">西游記</div>

<divclass="book">紅樓夢</div>

<divclass="book">三國演義</div>

<divclass="book">水滸傳</div>

<script>

//獲取類名為book的第1個div元素

varfirstBook=document.querySelector('.book');

console.log(firstBook);

//獲取類名為book的所有div元素

varallBook=document.querySelectorAll('.book');

console.log(allBook);

</script></body>6.3.5 根據CSS選擇器獲取元素掌握獲取基本結構元素的屬性，能夠靈活應用獲取基本結構元素的屬性

先定一個小目標！6.3.6 獲取基本結構元素6.3.6 獲取基本結構元素屬性作用document.documentElement獲取文檔的html元素document.body獲取文檔的body元素document.forms獲取文檔中包含所有form元素的集合document.images獲取文檔中包含所有image元素的集合在實際開發中，若需要獲取HTML中的基本結構元素（如html、body等），可以通過document對象的屬性獲取。獲取基本結構元素的document對象的屬性如下表所示。6.3.6 獲取基本結構元素下面通過代碼演示如何獲取文檔中body元素和html元素。<script>

//獲取body元素

varbodyEle=document.body;

console.log(bodyEle);

//獲取html元素

varhtmlEle=document.documentElement;

console.log(htmlEle);</script>6.3.6 獲取基本結構元素獲取或設置當前文檔的標題多學一招在實際開發中，當需要獲取或設置當前文檔的標題時，可以使用document對象提供的title屬性，示例代碼如下。console.log(document.title); //獲取標題document.title='新標題'; //設置標題6.3.6 獲取基本結構元素多學一招下面通過代碼演示如何獲取當前文檔的標題。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<title>這是文檔標題</title></head><body>

<script>

console.log(document.title);

</script></body></html>6.3.6 獲取基本結構元素事件基礎6.4了解事件的概念，能夠描述事件的3個要素

先定一個小目標！6.4.1

事件概述事件是指可以被JavaScript偵測到的行為，如單擊頁面、鼠標指針滑過某個區域等，不同行為對應不同事件，并且每個事件都對應與其相關的事件驅動程序。事件驅動程序由開發人員編寫，用于實現由該事件產生的網頁交互效果。6.4.1

事件概述事件是一種“觸發-響應”機制，行為產生后，對應的事件就會被觸發，事件驅動程序就會被調用，從而使網頁響應并產生交互效果。6.4.1

事件概述6.4.1

事件概述事件有3個要素，分別是事件源、事件類型和事件驅動程序，具體解釋如下。事件源：承受事件的元素對象。例如，在單擊按鈕的過程中，按鈕就是事件源。事件類型：使網頁產生交互效果的行為對應的事件種類。例如，單擊事件的事件類型為click。事件驅動程序：事件觸發后為了實現相應的網頁交互效果而運行的代碼。若要實現網頁交互效果，首先需要確定事件源，事件源確定后就可以獲取這個元素；然后需要確定事件類型，為獲取的元素注冊該類型的事件；最后分析事件觸發后，實現相應網頁交互效果的邏輯，編寫實現該邏輯的事件驅動程序。6.4.1

事件概述掌握事件的注冊，能夠為頁面中的元素注冊事件

先定一個小目標！6.4.2

事件注冊在實際開發中，為了讓元素在觸發事件時運行特定的代碼，需要為元素注冊事件。注冊事件又稱為綁定事件，在JavaScript中，通過事件屬性可以為操作的元素對象注冊事件。事件屬性的命名方式為“on+事件類型”，例如，單擊事件的事件類型為click，對應的事件屬性為onclick。6.4.2

事件注冊注冊事件有兩種方式，一種是在標簽中注冊，另一種是在JavaScript中注冊。在標簽中注冊事件的示例代碼如下。<divonclick="">按鈕</div>6.4.2

事件注冊上述示例代碼中，在onclick屬性的值中可以編寫事件驅動程序。在JavaScript中注冊事件的示例代碼如下。//元素對象.事件屬性=事件處理函數;element.onclick=function(){};下面通過代碼演示如何進行事件注冊。定義一個按鈕元素，通過注冊事件，實現單擊按鈕元素后彈出內容為“事件注冊”的警告框，示例代碼如下。<body>

<buttonid="btn">單擊</button>

<script>

//獲取事件源

varbutton=document.getElementById('btn');

//為獲取的元素注冊單擊事件

button.onclick=function(){

alert('事件注冊');

};

</script></body>6.4.2

事件注冊操作元素6.5掌握操作元素內容的方法，能夠根據不同場景選擇合適的方法操作元素內容6.5.1

操作元素內容

先定一個小目標！屬性作用innerHTML設置或獲取元素開始標簽和結束標簽之間的HTML內容，返回結果包含HTML標簽，并保留空格和換行innerText設置或獲取元素的文本內容，返回結果會去除HTML標簽和多余的空格、換行，在設置文本內容的時候會進行特殊字符轉義textContent設置或獲取元素的文本內容，返回結果保留空格和換行在實際開發中，當需要修改頁面中的內容時，就需要操作元素內容，例如，修改頁面元素的文本內容，或動態生成頁面內容等。下面列舉DOM提供的操作元素內容的常用屬性，具體如下表所示。6.5.1

操作元素內容innerHTML屬性獲取的元素內容包含HTML標簽；innerText屬性獲取的元素內容不包含HTML標簽；textContent屬性和innerText屬性相似，都可以用來設置或獲取元素的文本內容，并且返回結果會去除HTML標簽，但是textContent屬性還可以用于設置和獲取占位隱藏元素的文本內容。需要注意的是，IE8及更早版本的瀏覽器不支持textContent屬性，在使用時需要注意瀏覽器兼容問題。小提示：通過給元素的visibility樣式屬性設置hidden值即可實現占位隱藏。6.5.1

操作元素內容首先搭建一個用于展示商品種類和商品狀態的表格，商品種類分別是過季舊款、當前熱銷、春季新品，對應的商品狀態分別是已下架、熱賣中、待上架。然后通過innerHTML屬性獲取過季舊款對應的商品狀態，并將過季舊款對應的商品狀態修改為已上架；通過innerText屬性獲取當前熱銷的商品狀態，通過textContent屬性獲取春季新品的商品狀態。6.5.1

操作元素內容6.5.1

操作元素內容掌握操作元素屬性的方法，能夠根據不同場景選擇合適的方法操作元素屬性

先定一個小目標！6.5.2

操作元素屬性在實際開發中，僅僅通過操作元素內容并不能滿足開發的需求，還需要學習如何操作元素屬性。在DOM中，

可以操作元素的property屬性、attribute屬性和data-*屬性。6.5.2

操作元素屬性6.5.2

操作元素屬性1.操作property屬性property是一個統稱，它并不是一個具體的屬性名，而是指元素在DOM中作為對象擁有的屬性。對于頁面中property屬性的操作，可以通過“元素對象.屬性名”實現。6.5.2

操作元素屬性img元素用于顯示圖片。下面列舉img元素中的常用屬性及其作用，具體如下表所示。（1）操作img元素的屬性屬性作用src設置圖片的路徑alt設置圖片加載失敗時顯示在網頁上的替代文字title設置鼠標移到圖片上時顯示的提示文字width設置圖片的寬度height設置圖片的高度sizes設置圖片的尺寸下面以單擊按鈕操作img元素屬性為例，演示img元素中src、title屬性的使用方法，實現單擊按鈕時顯示圖片和圖片對應的提示文字，示例代碼如下。6.5.2

操作元素屬性<body>

<buttonid="vegetable">蔬菜</button>

<buttonid="fruit">水果</button><br>

<imgsrc="images/fruit.png"alt=""title="水果">

<script>

//通過id屬性獲取元素

varvegetable=document.getElementById('vegetable');

varfruit=document.getElementById('fruit');

//通過CSS選擇器獲取元素

varimg=document.querySelector('img');>>續上一頁代碼6.5.2

操作元素屬性

//注冊事件處理程序

vegetable.onclick=function(){

img.src='images/vegetable.png';

img.title='蔬菜';

};

fruit.onclick=function(){

img.src='images/fruit.png';

img.title='水果';

};

</script></body>6.5.2

操作元素屬性input元素用于使用戶在表單中輸入內容。下面列舉input元素中的常用屬性及其作用，具體如下表所示。（2）操作input元素的屬性屬性作用type設置文本框的類型，例如text、checkbox、radio、submit等name設置表單的名稱value設置文本框的值，默認值為空字符串checked設置是否選中該元素，該屬性僅在type為checkbox或radio時有效disabled設置表單元素是否被禁用下面演示input元素中type、value和disabled屬性的使用，實現單擊按鈕時，通過獲取文本框的值并將其修改為“被單擊了！”來改變文本框的值，并在單擊按鈕時設置禁用按鈕，示例代碼如下。6.5.2

操作元素屬性<body>

<button>搜索</button>

<inputtype="text"value="輸入內容">

<script>

//通過CSS選擇器獲取元素

varbtn=document.querySelector('button');

varinput=document.querySelector('input');>>續上一頁代碼6.5.2

操作元素屬性

//注冊事件處理程序

btn.onclick=function(){

input.value='被單擊了！';

//通過value修改表單中值

this.disabled=true;

//this指向事件函數的調用者btn

};

</script></body>6.5.2

操作元素屬性2.操作attribute屬性attribute屬性也是一個統稱，它是指HTML標簽的屬性。下面詳細講解attribute屬性的操作。（1）設置屬性通過元素對象的setAttribute()方法可以設置屬性，其語法格式如下。element.setAttribute('屬性','值');6.5.2

操作元素屬性下面通過代碼演示如何設置屬性。<body>

<div></div>

<script>

vardiv=document.querySelector('div');

div.setAttribute('flag',3);

div.setAttribute('id','book');

</script></body>6.5.2

操作元素屬性（2）獲取屬性值通過元素對象的getAttribute()方法可以獲取屬性值，其語法格式如下。element.getAttribute('屬性');下面通過代碼演示如何獲取屬性值。<body>

<divid="demo1"index="1"></div>

<script>

vardiv=document.querySelector('div');

console.log(div.getAttribute('id')); //輸出結果為：demo1

console.log(div.getAttribute('index'));

//輸出結果為：1

</script></body>6.5.2

操作元素屬性（3）移除屬性通過元素對象的removeAttribute()方法可以移除屬性，其語法格式如下。element.removeAttribute('屬性');下面通過代碼演示如何移除屬性。<body>

<divid="demo2"index="2"></div>

<script>

vardiv=document.querySelector('div');

console.log(div.removeAttribute('id'));

console.log(div.removeAttribute('index'));

</script></body>6.5.2

操作元素屬性3.操作data-*屬性data-*屬性是HTML5提供的一種新的自定義屬性，（通過“data-”前綴來設置開發所需要的自定義屬性，“*”可以自行命名）。（1）設置data-*屬性在HTML的標簽中可以直接為元素設置data-*屬性，示例代碼如下。<divdata-index="3"></div>在上述示例代碼中，“data-”是屬性前綴，index是自定義的屬性名。在DOM中設置data-*屬性值的方式有兩種，第1種方式是通過“元素對象.dataset.屬性名=值”設置，也可以寫為“元素對象.dataset['屬性名']=值”，如果屬性名包含連字符“-”，則需要采用駝峰命名法；第2種方式是通過setAttribute()方法設置。6.5.2

操作元素屬性下面通過兩種方式演示如何設置data-*屬性，示例代碼如下。6.5.2

操作元素屬性<body>

<div></div>

<script>

vardiv=document.querySelector('div');

div.dataset.index='3';

//演示第1種方式

div.setAttribute('data-name','小智');

//演示第2種方式

</script></body>6.5.2

操作元素屬性（2）獲取data-*屬性值獲取data-*屬性值的方式有兩種，第1種方式是通過“元素對象.dataset.屬性名”獲取，也可以寫為“元素對象.dataset['屬性名']”，如果屬性名包含連字符“-”，則需要采用駝峰命名法；第2種方式是通過getAttribute()方法獲取。下面通過兩種方式演示如何獲取data-*屬性值，示例代碼如下。6.5.2

操作元素屬性<body>

<divgetTime="20"data-index="3"data-list-name="小智"></div>

<script>

vardiv=document.querySelector('div');

//通過第1種方式獲取

console.log(div.dataset.index); //輸出結果為：3

console.log(div.dataset['index']);

//輸出結果為：3

console.log(div.dataset.listName);

//輸出結果為：小智

console.log(div.dataset['listName']);//輸出結果為：小智>>續上一頁代碼6.5.2

操作元素屬性

//通過第2種方式獲取

console.log(div.getAttribute('data-index'));

//輸出結果為：3

console.log(div.getAttribute('data-list-name'));//輸出結果為：小智

</script></body>掌握操作元素樣式的方法，能夠根據不同場景選擇合適的方法操作元素樣式

先定一個小目標！6.5.3

操作元素樣式在前面的學習中，已經講解了操作元素內容和元素屬性的方式，為了實現更加完善的頁面交互效果，還需要學習如何操作元素樣式。操作元素樣式有3種方式，分別是通過style屬性操作元素樣式、通過className屬性操作元素樣式和通過classList屬性操作元素樣式。6.5.3

操作元素樣式1.通過style屬性操作元素樣式6.5.3

操作元素樣式在實際開發中，頁面中樣式的交互效果，可以通過操作元素對象的style屬性實現，示例代碼如下。element.style.樣式屬性名='樣式屬性值'; //設置樣式console.log(element.style.樣式屬性名); //獲取樣式6.5.3

操作元素樣式下面列舉style屬性中常用的樣式屬性名，具體如下表所示。樣式屬性名作用background設置或獲取元素的背景屬性backgroundColor設置或獲取元素的背景顏色display設置或獲取元素的顯示類型fontSize設置或獲取元素的字體大小width設置或獲取元素的寬度height設置或獲取元素的高度left設置或獲取定位元素的左部位置6.5.3

操作元素樣式>>續上一頁表樣式屬性名作用listStyleType設置或獲取列表項標記的類型overflow設置或獲取如何處理呈現在元素框外面的內容textAlign設置或獲取文本的水平對齊方式textDecoration設置或獲取文本的修飾textIndent設置或獲取文本第一行的縮進transform向元素應用2D或3D轉換6.5.3

操作元素樣式下面通過代碼演示如何對元素對象添加樣式。<body>

<divid="box"></div>

<script>

varele=document.querySelector('#box');

ele.style.width='100px';

ele.style.height='100px';

ele.style.transform='rotate(7deg)';

</script></body>其效果相當于在CSS中添加如下樣式。#box{width:100px;height:100px;transform:rotate(7deg);}2.通過className屬性操作元素樣式6.5.3

操作元素樣式在實際開發中，當需要為元素對象設置多種樣式時，若通過style屬性實現，就需要編寫多行“element.style.樣式屬性名='樣式屬性值';”形式的代碼，此種方式非常煩瑣。為了能夠方便快捷地實現為元素對象設置多種樣式，可以通過className屬性操作元素樣式，設置該屬性相當于設置元素對應標簽的class屬性。6.5.3

操作元素樣式操作className屬性時，首先將元素對象的樣式寫在CSS中，并使用CSS中的類選擇器為元素設置樣式，然后通過JavaScript操作className屬性更改元素的類名，實現元素樣式的更改。操作className屬性的示例代碼如下。element.className='類名'; //設置類名console.log(element.className); //獲取類名6.5.3

操作元素樣式下面通過代碼演示如何通過className屬性更改元素的樣式。<style>

.target{

width:200px;

height:200px;

border:1pxsolidblack;

font-size:10px;

text-align:center;

line-height:200px;

}</style>6.5.3

操作元素樣式通過JavaScript操作className屬性更改元素類名的示例代碼如下。<body>

<divclass="box">使用className更改元素的樣式</div>

<script>

//獲取div元素

varbox=document.querySelector('.box');

//為獲取到的div元素設置className

box.className='target';

</script></body>3.通過classList屬性操作元素樣式6.5.3

操作元素樣式在實際開發中，對于元素中類的操作還可以使用元素對象的classList屬性，在使用該屬性時，需要注意IE瀏覽器的兼容問題。classList屬性從IE10開始才被支持，且IE10中classList屬性不能對SVG（ScalableVectorGraphics，可縮放矢量圖形）元素進行操作。6.5.3

操作元素樣式通過classList屬性可以對元素中的類名進行獲取、添加、移除、判斷等操作。通過c

溫馨提示

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

評論

0/150

提交評論