首頁技術(shù)文章正文

JavaScript中修改元素內(nèi)容怎樣操作?

更新時間:2021-05-31 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

操作元素樣式有兩種方式,一種是操作style屬性,一種是操作className屬性,下面我們分別進行講解。

1. 操作style屬性

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

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

表1 常見的style屬性操作的樣式名

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

接下來,通過代碼演示如何對元素的樣式進行添加,具體示例如下。
   <div id="box"></div>

   <script>

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

    ele.style.width = '100px';

    ele.style.height = '100px';

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

   </script>

上述第4~6行代碼用于為獲取的ele元素對象添加樣式,其效果相當于在CSS中添加以下樣式。

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

2. 操作className屬性

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

接下來,通過代碼演示如何使用className更改元素的樣式。

(1)編寫html結(jié)構(gòu)代碼,具體示例如下。

   <style>

    div {

     width: 100px;

     height: 100px;

     background-color: pink;

    } 

   </style>

   <body>

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

  </body>

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

1623376704529_修改元素內(nèi)容.jpg

圖1 初始效果

(2)單擊div元素更改元素的樣式,示例代碼如下。

   <script>

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

    test.onclick = function () {

     this.className = 'change';

    };

   </script>

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

(3)在style中添加change類,樣式代碼如下。

   .change {

    background-color: purple;

    color: #fff;

    font-size: 25px;

    margin-top: 100px;

   }

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

操作元素內(nèi)容

圖2 單擊后效果

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

this.className = 'first change';

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







猜你喜歡:

3種JavaScript代碼書寫位置和注意事項

javascript創(chuàng)建對象的幾種方式介紹?

什么是虛擬DOM?如何理解虛擬DOM?

黑馬程序員前端高級軟件工程師培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!