教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

JavaScript中如何操作元素內(nèi)容？

更新時(shí)間:2021年05月31日15時(shí)35分 來(lái)源:傳智教育 瀏覽次數(shù):

傳智教育-一樣的教育，不一樣的品質(zhì)

操作元素樣式有兩種方式，一種是操作style屬性，一種是操作className屬性，下面我們分別進(jìn)行講解。

1. 操作style屬性

除了前面講解的元素內(nèi)容和屬性外，對(duì)于元素對(duì)象的樣式，可以直接通過(guò)“元素對(duì)象.style.樣式屬性名”的方式操作。樣式屬性名對(duì)應(yīng)CSS樣式名，但需要去掉CSS樣式名里的半字線“-”，并將半字線后面的英文的首字母大寫(xiě)。例如，設(shè)置字體大小的樣式名font-size，對(duì)應(yīng)的樣式屬性名為fontSize。

為了便于讀者的學(xué)習(xí)使用，下面我們通過(guò)表1列出常用style屬性中CSS樣式名稱的書(shū)寫(xiě)及說(shuō)明。

表1 常見(jiàn)的style屬性操作的樣式名

名稱 說(shuō)明
background                                            設(shè)置或返回元素的背景屬性                                        
backgroundColor 設(shè)置或返回元素的背景色
display 設(shè)置或返回元素的顯示類(lèi)型
fontSize 設(shè)置或返回元素的字體大小
height                                                   設(shè)置或返回元素的高度
left 設(shè)置或返回定位元素的左部位置
listStyleType 設(shè)置或返回列表項(xiàng)標(biāo)記的類(lèi)型
overflow 設(shè)置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容
textAlign 設(shè)置或返回文本的水平對(duì)齊方式
textDecoration 設(shè)置或返回文本的修飾
textIndent 設(shè)置或返回文本第一行的縮進(jìn)
transform 向元素應(yīng)用2D或3D轉(zhuǎn)換

接下來(lái)，通過(guò)代碼演示如何對(duì)元素的樣式進(jìn)行添加，具體示例如下。 
   <div id="box"></div>

   <script>

    var ele = document.querySelector('#box'); // 獲取元素對(duì)象

    ele.style.width = '100px';

    ele.style.height = '100px';

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

   </script>

上述第4~6行代碼用于為獲取的ele元素對(duì)象添加樣式，其效果相當(dāng)于在CSS中添加以下樣式。

#box {width: 100px; height: 100px; transform: rotate(7deg);}

2. 操作className屬性

在開(kāi)發(fā)中，如果樣式修改較多，可以采取操作類(lèi)名的方式更改元素樣式，語(yǔ)法為“元素對(duì)象.className”。訪問(wèn)className屬性的值表示獲取元素的類(lèi)名，為className屬性賦值表示更改元素類(lèi)名。如果元素有多個(gè)類(lèi)名，在className中以空格分隔。

接下來(lái)，通過(guò)代碼演示如何使用className更改元素的樣式。

（1）編寫(xiě)html結(jié)構(gòu)代碼，具體示例如下。

   <style>

    div {

     width: 100px;

     height: 100px;

     background-color: pink;

    } 

   </style>

   <body>

    <div class="first">文本</div>

  </body>

上述代碼中，第9行給div元素添加first類(lèi)，并在style中設(shè)置了first的樣式，瀏覽器預(yù)覽效果如圖1所示。

圖1 初始效果

（2）單擊div元素更改元素的樣式，示例代碼如下。

   <script>

    var test = document.querySelector('div');

    test.onclick = function () {

     this.className = 'change';

    };

   </script>

上述代碼中，第2行獲取div元素存儲(chǔ)在test對(duì)象中。第3~5行為text對(duì)象添加onclick單擊事件，第4行執(zhí)行事件處理程序使用this.className給test對(duì)象設(shè)置change類(lèi)名，其中this指的是test對(duì)象。

（3）在style中添加change類(lèi)，樣式代碼如下。

   .change {

    background-color: purple;

    color: #fff;

    font-size: 25px;

    margin-top: 100px;

   }

（4）單擊div盒子，瀏覽器預(yù)覽效果如圖2所示。

1622445279403_12.jpg

圖2 單擊后效果

執(zhí)行上述代碼之后，會(huì)直接把原先的類(lèi)名first修改為change，如果想要保留原先的類(lèi)名，可以采取多類(lèi)名選擇器的方式，修改第（2）步的第4行代碼，示例代碼如下。

this.className = 'first change';

 修改之后，在控制臺(tái)查看到div元素的類(lèi)已經(jīng)修改成了<div class="first change">文本</div>，保留了之前的類(lèi)名。






猜你喜歡：

什么是DOM？DOM文檔樹(shù)模型的關(guān)鍵名詞解釋

多維數(shù)組是什么？Javascript多維數(shù)組是什么？

JavaScript動(dòng)畫(huà)和CSS3動(dòng)畫(huà)有什么區(qū)別？

JavaScript如何引入腳本文件？

傳智教育前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到：
和我們?cè)诰€交談！