<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • js獲取元素坐標位置(js中var和let的區別)


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

    1. 操作style屬性

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

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

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

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

    接下來,通過代碼演示如何對元素的樣式進行添加,具體示例如下。

       <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屬性

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

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

    (1)編寫html結構代碼,具體示例如下。

       <style>
    
        div {
    
         width: 100px;
    
         height: 100px;
    
         background-color: pink;
    
        } 
    
       </style>
    
       <body>
    
        <div class="first">文本</div>
    
      </body>

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

    前端教程:JavaScript中如何操作元素內容?

    圖1 初始效果

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

       <script>
    
        var test = document.querySelector('div');
    
        test.onclick = function () {
    
         this.className = 'change';
    
        };
    
       </script>

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

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

       .change {
    
        background-color: purple;
    
        color: #fff;
    
        font-size: 25px;
    
        margin-top: 100px;
    
       }

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

    前端教程:JavaScript中如何操作元素內容?

    圖2 單擊后效果

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

    this.className = 'first change';

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

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费