Bài 12: DOM CSS trong javascript

Dựa vào hàm setAttribute trong bài trước thì chúng ta hoàn toàn có thể thêm css cho thẻ HTML, nhưng trong javascript còn hỗ trợ chúng ta một cách CSS chuyên nghiệp hơn nữa.

1, Cú Pháp.

-Để CSS cho các thẻ HTMl bằng javascript các bạn dùng cú pháp:

element.style.propertyName = value;

Trong đó:

• element là các đối tượng HTML (được gọi bằng các phương thức getElement…).
• propertyName là tên thuộc tính CSS các bạn muốn xét.
• value là giá trị của thuộc tính đó.

-Và để lấy ra giá trị của thuộc tính css các bạn sử dụng cú pháp:

element.style.propertyName;

Trong đó:

• element là các đối tượng HTML (được gọi bằng các phương thức getElement…).
• propertyName là tên thuộc tính CSS các bạn muốn lấy.

2, Ví Dụ.

VD1: Mình sẽ xét color=red cho thẻ HTML có id=series.

    
    
    



    
Các series học lập trình tại toidicode.com
    

        
Học HTML
        
Học CSS
        
Học javascript
        
Học jquery
    
    
    
        //tìm đến thẻ HTML có id = series và css
        document.getElementById('series').style.color = 'red';
    

Xem Kết Quả

VD2: Lấy ra giá trị của thuộc tính css.

    
    
    



    
Các series học lập trình tại toidicode.com
    

        
Học HTML
        
Học CSS
        
Học javascript
        
Học jquery
    
    
    
        //tìm đến thẻ HTML có id = series và lấy thông số của thuộc tính background
        var value = document.getElementById('series').style.background;
        //hiển thị ra giá trị
        alert(value);
    

Xem Kết Quả

3, Chú ý.

-Đối với các thuộc tính có dấu gạch nối ngăn ở giữa như: margin-top, margin-bottom,… Các bạn chuyển về dạng viết liền theo chuẩn lưng lạc đà.

VD:

• margin-top thành marginTop
• background-color thành backgroundColor
• ……

3, Lời kết.

-Như vậy phần này mình đã giới thiệu xong đến mọi người về DOM CSS trong javascript rồi. Tuy nhiên javascript còn hỗ trợ chúng ta rất nhiều cách khác có thể css được các thẻ HTML.