HTML Thuộc Tính ID

Thuộc Tính ID

Thuộc tính ID được dùng để gán một giá trị duy nhất (ID) cho phần tử trên trang, giá trị này được dùng để phân biệt các phần tử khác nhau trên trang.

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

Chạy Thử

Giá trị của thuộc tính ID của mỗi phần tử trên một trang là duy nhất. Chúng ta không gán cùng một giá trị ID cho hai phần tử khác nhau trên cùng một một trang.

Thuộc tính ID 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 ID trong CSS

Trong CSS để chọn ra phần tử với thuộc tính ID có giá trị cho trước, bạn chỉ cần đặt trước giá trị của ID ký tự #. Đ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 ID là special-paragraph:

#special-paragraph {
    background-color: lightblue;
    color: #fff;
}

Chạy Thử

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

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

function changeText() {
    var currenttext = document.getElementById("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.getElementById("special-paragraph").innerHTML = text2;
    } else {
        document.getElementById("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.

Tạo Link Bookmark Với ID

Chúng ta có thể sử dụng ID để tạo một link tới một phần tử với giá tị của thuộc tính ID cho trước trên trang.

<a href="#de-muc-so-10">Đi Tới Đề Mục Số 10</a>

Chạy Thử

1 Bình Luận

Content must not be empty

Related Tutorial