Toidicode.com

Toidicode.com

BASIC TO ADVANCE

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.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
    <div>Các series học lập trình tại toidicode.com</div>
    <ul>
        <li class="list">Học HTML</li>
        <li id="series">Học CSS</li>
        <li class="list">Học javascript</li>
        <li class="series">Học jquery</li>
    </ul>
    
    <script type="text/javascript">
        //tìm đến thẻ HTML có id = series và css
        document.getElementById('series').style.color = 'red';
    </script>
</body>

</html>

Xem Kết Quả

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Toidicode.com javascript</title>
</head>

<body>
    <div>Các series học lập trình tại toidicode.com</div>
    <ul>
        <li class="list">Học HTML</li>
        <li id="series" style="background: red;">Học CSS</li>
        <li class="list">Học javascript</li>
        <li class="series">Học jquery</li>
    </ul>
    
    <script type="text/javascript">
        //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);
    </script>
</body>

</html>

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.

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

2 Comments

Chào anh. Anh cho em hỏi. Khi đặt một style cho phần tử thì mình dùng biến được không ạ. Ví dụ:
var variable= 500;
element.style.height = variable px;
Nếu được thì cú pháp như thế nào ạ?.

Khánh

2 năm trước

Chào Khánh,

Được nhé bạn.
VD:
 

var height = "50px";

element.style.height = height;

// hoặc

var height = 50;

element.style.height = height + "px";

 

Vũ Thanh Tài

2 năm trước

Bình luận

Captcha