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>
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>
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.