HTML Thuộc Tính Class

Thuộc Tính Class

Thuộc tính Class được dùng để gán một hoặc nhiều giá trị Class khác nhau cho phần tử trên trang, cùng một giá trị class có thể được gán cho nhiều phần tử khác nhau trên trang.

<p class="paragraph">Đoạn văn bản số 1</p>
<p class="paragraph"paragraph">Đoạn văn bản số 2</p>
<p class="paragraph">Đoạn văn bản này được gán giá thêm class là "special-paragraph"</p>

Chạy Thử

Khác với ID nhiều phần tử khác nhau có thể sử dụng chung một class.

Thuộc tính Class thường được sử dụng bởi CSS và JavaScript để thực hiện việc trang trí cho phần tử (với CSS), hoặc thực hiện một số tác vụ nhất định trên phần tử (với JavaScript).

Sử Dụng Thuộc Tính Class trong CSS

Trong CSS để chọn ra phần tử với thuộc tính Class có giá trị cho trước, bạn chỉ cần đặt trước giá trị của class ký tự dấu chấm .. Đoạn mã CSS sau sẽ trang trí màu cho riêng phần tử văn bản với giá trị của thuộc tính Class lần lượt là paragraphspecial-paragraph:

.paragraph {
    font-size: 13px;
    font-family: New Courier;
    color: #333;
}

Chạy Thử

Sử Dụng Thuộc Tính Class trong JavaScript

Trong JavaScript để chọn ra phần tử với thuộc tính Class có giá trị cho trước, bạn cần sử dụng hàm document.getElementsByClassName(). Đoạn mã JavaScript sau sẽ thay đổi nội dung của phần tử special-paragraph:

function changeText() {
    var currenttext = document.getElementsByClassName("special-paragraph").innerHTML;
    var text1 = 'Đoạn văn bản này được gán giá trị id là "special-paragraph"'
    var text2 = "JavaScript Thật Tuyệt Vời!"
    if (currenttext == text1) {
        document.getElementsByClassName("special-paragraph").innerHTML = text2;
    } else {
        document.getElementsByClassName("special-paragraph").innerHTML = text1;
    }
}
window.setInterval(changeText, 1500)

Chạy Thử

Để biết thêm về các tính năng của ngôn ngữ JavaScript xin mời bạn tham khảo hướng dẫn học JavaScript.

Sử Dụng Nhiều Class Cho Cùng Một Phần Tử

Một phần tử HTML có thể có nhiều giá trị class khác nhau với mỗi giá trị được phân biệt bởi khoảng trắng.

Ở ví dụ dưới đây phần tử p thứ 3 có hai class là paragraphspecial-paragraph:

<p class="paragraph">Đoạn văn bản số 1</p>
<p class="paragraph"paragraph">Đoạn văn bản số 2</p>
<p class="paragraph special-paragraph">Đoạn văn bản này được gán giá thêm class là "special-paragraph"</p>

Trong đoạn code, luật CSS áp dụng cho class .special-paragraph sẽ chỉ được áp dụng cho phần tử p thứ 3:

.paragraph {
    font-size: 13px;
    font-family: New Courier;
    color: #333;
}

.special-paragraph {
    background-color: lightblue;
    color: #fff;
}
HTML Frontend Thiết Kế Web
Thêm Bình Luận: