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

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

1、Javascript改變HTML內(nèi)容

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

（1）添加一個(gè)按鈕。

在body中插入button標(biāo)簽實(shí)現(xiàn)按鈕：

<button type="button">點(diǎn)擊</button>

（2）在按鈕上綁定onclick點(diǎn)擊事件。

在按鈕元素中，添加一個(gè)點(diǎn)擊事件 onclick屬性，如下所示：

<button type="button" onclick="">點(diǎn)擊</button>

（3）獲取id="demo"的元素標(biāo)簽。

首先，我們?nèi)绾潍@取HTML元素呢？獲取之前我們需要使用document對象，那么，什么是document對象？document是一個(gè)對象，它的作用是當(dāng)瀏覽器載入HTML文檔，即可生成document 對象，document對象是HTML文檔的根節(jié)點(diǎn)，幫助我們從腳本中對HTML 頁面中所有元素進(jìn)行訪問。我們使用getElementById() 方法來獲取id="demo"的元素標(biāo)簽：

<p id="demo">歡迎來到教育培訓(xùn)網(wǎng)。</p>

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

（4）使用innerHTML修改HTML內(nèi)容（將”歡迎來到教育培訓(xùn)網(wǎng)“ 更改為”Hello boxuegu!“）。

修改HTML內(nèi)容，我們通過innerHTML 屬性，可設(shè)置或返回表格行的開始和結(jié)束標(biāo)簽之間的 HTML，也就是，可以對應(yīng)的獲取/賦值元素內(nèi)容。直接為innerHTML屬性賦值，將"歡迎來到教育培訓(xùn)網(wǎng)"內(nèi)容設(shè)置為 "Hello boxuegu!"。

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

= "Hello boxuegu!"'>點(diǎn)擊</button>

2、Javascript改變HTML屬性

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

（1）添加白天和黑夜兩個(gè)按鈕。

<button>白天</button>

<button>黑夜</button>

通過button標(biāo)簽添加兩個(gè)白天和黑夜兩個(gè)按鈕。

（2）在按鈕上綁定點(diǎn)擊事件onclick。

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

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

分別為button標(biāo)簽添加對應(yīng)的onclick事件。

（3）獲取圖片元素。

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

<!--圖片-->

<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>標(biāo)簽，就獲取到了對應(yīng)圖片元素。

（4）更換圖片路徑。

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

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

我們設(shè)置對應(yīng)的兩個(gè)按鈕，改變src屬性值，將其設(shè)置為對應(yīng)的圖片代碼如下：

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

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

這樣我們通過點(diǎn)擊按鈕改變<img>標(biāo)簽src屬性了 ,完成了圖片路徑的改變。

3、Javascript改變HTML樣式

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

（1）添加一個(gè)按鈕。

<button>點(diǎn)擊</button>

我們通過button標(biāo)簽實(shí)現(xiàn)“點(diǎn)擊”按鈕的添加。

（2）在按鈕上綁定onclick點(diǎn)擊事件。

<button onclick="">點(diǎn)擊</button>

在上述代碼中，實(shí)現(xiàn)了在button標(biāo)簽上添加onclick點(diǎn)擊事件。

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

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

<!--標(biāo)簽-->

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

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

<!--按鈕-->

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

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

（4）改變文字大小。

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

<button type="button"

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

</button>

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

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

985大學(xué) 211大學(xué) 全國院校對比 專升本