04/10/2018, 17:03
[BÀI 16] DOM CSS TRONG JAVASCRIPT
CSS định nghĩa màu sắc , font, layout cho trang web. Nó bao gồm một tập các thuộc tính, mỗi thuộc tính có một giá trị nhất định. HTML DOM cho phép JavaSscript thay đổi style của các các phần tử HTML. JavaScript cung cấp đối tượng style cho mỗi element của trang web, để thay đổi style của trang ...
CSS định nghĩa màu sắc , font, layout cho trang web. Nó bao gồm một tập các thuộc tính, mỗi thuộc tính có một giá trị nhất định.
HTML DOM cho phép JavaSscript thay đổi style của các các phần tử HTML. JavaScript cung cấp đối tượng style cho mỗi element của trang web, để thay đổi style của trang web.
Để thay đổi style của một phần tử HTML, ta sử dụng cú pháp sau:
document.getElementById(id).style.property=new style
|
1 |
document.getElementById(id).style.property=new style |
Ví dụ:
Thay đổi màu chữ của một thẻ <p>
<script type="text/javascript">
document.getElementById("demo").style.color = "red";
</script>
<p id="demo">DevPro - 147 Mai Dich, Cau Giay, HN</p>
|
1 2 3 4 |
<script type="text/javascript"> document.getElementById("demo").style.color = "red"; </script> <p id="demo">DevPro - 147 Mai Dich, Cau Giay, HN</p> |
- Đối tượng style trong JavaScript có các thuộc tính ứng với các thuộc tính của CSS
- Chú ý: với các thuộc tính CSS có dấu gạch ngang thì sẽ được bỏ dấu gạch ngang và viết hoa chữ cái của từ sau dấu gạch ngang (font-size ->fontSize).
Sử dụng sự kiện
HTML DOM cho phép bạn thực thi mã khi một sự kiện xảy ra.
Tìm hiểu sự kiện trong JavaScript ở đây !!! .
Ví dụ: thay đổi màu chữ của thẻ <p> thông qua id , khi click chuột vào ô button.
<script type = "text/javascript">
function btn1(){
var dev = document.getElementById("demo1");
dev.style.color = "blue";
}
function btn2{
var dev = document.getElementById("demo1");
dev.style.color = "red";
}
</script>
<body>
<p id="demo1">DevPro - 147 Mai Dich, Cau Giay, HN</p>
<input type="button" value="Xanh" onclick="btn1">
<input type="button" value="Đỏ" onclick="btn2">
</body>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type = "text/javascript"> function btn1(){ var dev = document.getElementById("demo1"); dev.style.color = "blue"; } function btn2{ var dev = document.getElementById("demo1"); dev.style.color = "red"; } </script> <body> <p id="demo1">DevPro - 147 Mai Dich, Cau Giay, HN</p> <input type="button" value="Xanh" onclick="btn1"> <input type="button" value="Đỏ" onclick="btn2"> </body> |
- HTML DOM trong JavaScript.
- DOM thuộc tính.
- DOM phương thức.
Các khóa học của DevPro tại đây!!!
