JavaScript的三大基本操作案例講解

Javascript是一種用于創(chuàng)建和控制動態(tài)網站內容的編程語言，是開發(fā)交互式Web界面的最佳選擇之一。那么，其交互性體現(xiàn)在哪些方面？如何實現(xiàn)基本的交互式操作？下面我們一起來深入學習一下Javascript的三大基本操作，分別是改變HTML內容，改變HTML屬性以及改變HTML樣式。希望通過案例講解，大家可以快速掌握這些基本操作。

1、Javascript改變HTML內容

我們先通過一個實例，為大家講述Javascript如何改變HTML的內容。首先我們要實現(xiàn)的效果是通過點擊按鈕，即可改變頁面的內容，實現(xiàn)內容的切換。比如點擊按鈕，將“歡迎來到教育培訓網”變?yōu)?ldquo;Hello boxuegu!”。要實現(xiàn)上述案例效果，其實很簡單，基本操作只需要四步：

（1）添加一個按鈕。

在body中插入button標簽實現(xiàn)按鈕：

<button type="button">點擊</button>

（2）在按鈕上綁定onclick點擊事件。

在按鈕元素中，添加一個點擊事件 onclick屬性，如下所示：

<button type="button" onclick="">點擊</button>

（3）獲取id="demo"的元素標簽。

首先，我們如何獲取HTML元素呢？獲取之前我們需要使用document對象，那么，什么是document對象？document是一個對象，它的作用是當瀏覽器載入HTML文檔，即可生成document 對象，document對象是HTML文檔的根節(jié)點，幫助我們從腳本中對HTML 頁面中所有元素進行訪問。我們使用getElementById() 方法來獲取id="demo"的元素標簽：

<p id="demo">歡迎來到教育培訓網。</p>

<button type="button" onclick='document.getElementById("demo")'>點擊</button>

（4）使用innerHTML修改HTML內容（將”歡迎來到教育培訓網“ 更改為”Hello boxuegu!“）。

修改HTML內容，我們通過innerHTML 屬性，可設置或返回表格行的開始和結束標簽之間的 HTML，也就是，可以對應的獲取/賦值元素內容。直接為innerHTML屬性賦值，將"歡迎來到教育培訓網"內容設置為 "Hello boxuegu!"。

<button type="button" onclick='document.getElementById("demo").innerHTML

= "Hello boxuegu!"'>點擊</button>

2、Javascript改變HTML屬性

我們通過點擊按鈕即可改變頁面HTML屬性，實現(xiàn)圖片切換。該效果是網頁中最常見的功能，也是前端開發(fā)必須掌握的最基本的技能。那么，該如何實現(xiàn)呢？下面以白天和黑夜兩個圖片的切換效果為例，為大家講解Javascript的基本操作：

（1）添加白天和黑夜兩個按鈕。

<button>白天</button>

<button>黑夜</button>

通過button標簽添加兩個白天和黑夜兩個按鈕。

（2）在按鈕上綁定點擊事件onclick。

<button onclick="">白天</button>

<button onclick="">黑夜</button>

分別為button標簽添加對應的onclick事件。

（3）獲取圖片元素。

若要替換圖片，首先就要獲取圖片元素；那么，如何獲取圖片元素呢？首先，需要定義圖片標簽<img>，然后標簽內定義一個名稱，將id設置為myImage；我們通過id來獲取當前圖片，代碼如下：

<!--圖片-->

<img id="myImage" border="0" src="./imgs/35.jpg">

然后，獲取id為myImage的圖片元素，代碼如下：

<!--按鈕-->

<button onclick="document.getElementById('myImage')">白天</button>

<button onclick="document.getElementById('myImage')">黑夜</button>

通過document.getElementById方法獲取<img>標簽，就獲取到了對應圖片元素。

（4）更換圖片路徑。

使用圖片標簽<img>內的src屬性來改變（src屬性是圖片路徑），將圖片設置為新路徑來實現(xiàn)圖像變換。若我們點擊按鈕，將src屬性的值改變?yōu)閤x.jpg新圖片，如下所示：

document.getElementById('myImage').src='xx.jpg'

我們設置對應的兩個按鈕，改變src屬性值，將其設置為對應的圖片代碼如下：

<button onclick="document.getElementById('myImage').src='./imgs/35.jpg'">白天</button>

<button onclick="document.getElementById('myImage').src='./imgs/36.jpg'">黑夜</button>

這樣我們通過點擊按鈕改變<img>標簽src屬性了 ,完成了圖片路徑的改變。

3、Javascript改變HTML樣式

改變HTML的樣式，實現(xiàn)字體大小樣式的變化，是網頁中最常見的功能，也是前端開發(fā)必須掌握的最基本的技能。那么，上述HTML樣式的改變是如何實現(xiàn)的呢？基本操作步驟如下：

（1）添加一個按鈕。

<button>點擊</button>

我們通過button標簽實現(xiàn)“點擊”按鈕的添加。

（2）在按鈕上綁定onclick點擊事件。

<button onclick="">點擊</button>

在上述代碼中，實現(xiàn)了在button標簽上添加onclick點擊事件。

（3）獲取顯示文字的元素。

改變字體大小之前，我們要先獲取顯示文字的元素；那要如何獲取顯示文字的元素呢？首先，定義文字顯示的div標簽，代碼如下：

<!--標簽-->

<div id="demo"></div>

然后，獲取id="demo"的元素，代碼如下：

<!--按鈕-->

<button type="button" onclick="document.getElementById('demo')">點擊</button>

通過document.getElementById方法來獲取id="demo"的div標簽，這樣就獲取到div標簽。接下來，就可以實現(xiàn)改變文字大小了。

（4）改變文字大小。

這一步需要使用innerHTML；因為HTML DOM 允許 Javascript 改變 HTML 元素的樣式。改變 HTML 元素的樣式，是改變 HTML 屬性的一種變種。該案例的示例代碼如下：

<button type="button"

onclick="document.getElementById('demo').style.fontSize='30px'">點擊

</button>

網頁默認字體大小為12像素，此處咱們通過style.fontSize將字體大小設置為30像素；也就說，將點擊按鈕之后呈現(xiàn)的文字設為30像素。

以上就是Javascript的三大基本操作案例講解，大家都掌握了嗎？如果還有任何關于Javascript的疑問，歡迎大家在教育培訓網官網咨詢在線老師，網站將在工作時間為大家提供一對一在線答疑服務！