首頁 >web前端 >js教程 >詳解angular中為HTML元素添加css類別的幾種方式

詳解angular中為HTML元素添加css類別的幾種方式

青灯夜游
青灯夜游轉載
2021-05-17 10:56:422261瀏覽

本篇文章跟大家介紹一下angular中為HTML元素加入css類別的幾種方式。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

詳解angular中為HTML元素添加css類別的幾種方式

主要是探索為 Angular 中的 HTML 元素動態的添加類別的幾種實現,包括 className 指令的使用,NgClass 的使用等。   【相關推薦:《angular教學》】

原生JavaScript 為元素新增一個類別

##主要程式碼是:

let element = document.getElementById('exampleTarget');

element.className = 'additional-class'

更具體的解釋在

className 的用法 ,這裡不在贅述。

使用[className] 屬性綁定在Angular 中加入css 類別

可以簡單的使用

className 為我們的HTML element 綁定類:

<div [className]="&#39;example-class&#39;">

</div>

當然使用此屬性綁定靜態類別並無太大的意義,我們可以根據條件綁定相關的類別:

<div [className]="condition ? &#39;condition-true-example-class&#39;: &#39;false-example-class&#39;">

</div>

conditiontrue 的時候,會加上condition-true-example-class 類,為false 的時候會加上false-example-class 類。

同樣,我們也可以寫入其他的簡單的判別:

<div [className]="&#39;example-class&#39; + variableValue">

</div>

#基於條件切換css 的類別

當基於某些條件切換css 的類別的時候,上述的方式就稍顯繁瑣:

<div [className]="condition ? &#39;condition-true-example&#39;:&#39;&#39;">

</div>

既不美觀也不太好理解。

我們可以使用:

<div [class.example-class]="condition">

</div>

來實現上述的需求。

更好的使用 ngClass 指令

上述的所有新增類別的方式,都可以使用

ngClass 來取代。

該指令只是語法糖,可以是程式碼看起來更簡潔明了。

就像我們使用

ngClass 指令來完成上面的兩個範例:

<!-- 替代 className 属性绑定 -->
<div [ngClass]="{
    &#39;condition-true-example-class&#39;: condition,
    &#39;false-example-class&#39;: !condition
}">
  
</div>

<!-- 替代基于条件切换 class -->
<div [ngClass]="{&#39;example-class&#39;: condition}">
  
</div>

除了上述的方式,

ngClass 還有一些其他的常用方式:

<!-- 添加单个类 -->
<div [ngClass]="&#39;example-class&#39;">
  
</div>

<!-- 添加多个类 -->
<div [ngClass]="[&#39;example-class&#39;,&#39;example-class-2&#39;]">
  
</div>

更多使用方式請查看:

官方文件

#需要注意的是:

如果在元件的

ts 檔案中使用HostBinding 新增了多個類別:

export class AppExampleComponent implements OnInit {
  @HostBinding(&#39;class&#39;) className = &#39;example-basic-class cursor-pointer d-inline-flex align-items-center&#39;;
  // ...
}

那麼在使用的時候,則不能在透過

classclassNamengClass ,新增類別。

更多程式相關知識,請造訪:

程式設計入門! !

以上是詳解angular中為HTML元素添加css類別的幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除