資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚學
法律學如何對一個元素應用兩個 CSS 類？
我們可以透過使用 class 屬性並用空格分隔每個類來對單個元素應用多個 CSS 類。有兩種方法可以將兩個 CSS 類應用於單個元素 -
使用 Class 屬性應用兩個類
用於設定單個類的 class 屬性也可用於設定多個類 -
<div class="class1 class2">This element has two CSS classes applied to it</div>
示例
讓我們看這個例子 -
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.one {
color: red;
}
.two {
font-size: 24px;
}
</style>
</head>
<body>
<p class = "one two">Using Class Attribute</p>
</body>
</html>
使用 JavaScript 應用兩個類
給定一個具有 id ‘paragraph’ 的 p 標籤，我們想對其應用這些類。classList 是一個屬性，add() 方法用於新增類。在這種情況下，我們添加了兩個類，即 one 和 two -
<script>
const paragraph = document.getElementById('paragraph');
paragraph.classList.add('one');
paragraph.classList.add('two');
</script>
以下是 .one 和 .two 的樣式 -
<style>
.one {
color: blue;
}
.two {
font-size: 20px;
}
</style>
示例
讓我們看這個例子 -
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.one {
color: blue;
}
.two {
font-size: 20px;
}
</style>
</head>
<body>
<p id = 'paragraph'>Demo content</p>
<script>
const paragraph = document.getElementById('paragraph');
paragraph.classList.add('one');
paragraph.classList.add('two');
</script>
</body>
</html>
更新於： 2023 年 11 月 16 日
2K+ 瀏覽量
廣告