JavaScript - DOM CSS trong Javascript

20/03/2019, 3:52 PM | 20/03/2019, 3:52 PM | 613 | 023

Bài này ta sẽ tìm hiểu về DOM CSS, tức là dùng DOM để sử lý, thay đổi CSS.
1. Cú pháp
Để thiết lập CSS cho thẻ HTML ta dùng cú pháp sau :

element.style.cssName= value;

Để lấy giá trị CSS của thẻ HTML ta dùng cú pháp sau :

element.style.cssName;

Trong đó :
    - element : là các đối tượng HTML, sử dụng DOM Element để lấy.
    - style : là một đối tượng chứa tất cả các thuộc tính của CSS, giúp ta thao tác lấy giá trị cũng như chỉnh sửa CSS.
    - cssName : là tên thuộc tính CSS
    - value : là giá trị của thuộc tính CSS.
Trường hợp thuộc tính ( cssName ) có dấu gạch ngang ở giữa như : margin-bottom, border-top .... thì ta sẽ bỏ dấu gạch ngang và viết hoa kí tự đầu tiên của chữ thứ 2 như sau : marginBottom, borderTop.

2. Các vi dụ
Ví dụ : Lấy giá trị thuộc tính css của thẻ

Xem DEMO

<html>
    <body>
        <script language="javascript">
          function getStyle()
          {
              // lấy giá trị thuộc tính color của thẻ có id="IdName"
              var color = document.getElementById('IdName').style.color;
              // hiển thị 
              alert(color);
          }
        </script>
        <p id="IdName" style="color:red">Chào bạn, chúc bạn ngày mới vui vẻ !</p>
        <input type="button" value="Get Color" onclick="getStyle()" />
    </body>
</html>

Ví dụ : Thay đổi color, font-size, float của thẻ khi click vào button

Xem DEMO

<html>
    <body>
        <script language="javascript">
          function ChangeColor()
          {
              // thay đổi color của thẻ có id="IdName"
              var color = document.getElementById('IdName').style.color = 'red';
          }
          function ChangeRight()
          {
              // thay đổi float của thẻ có id="IdName"
              var color = document.getElementById('IdName').style.float = 'right'
          }
          function ChangeLeft()
          {
              // thay đổi float của thẻ có id="IdName"
              var color = document.getElementById('IdName').style.float = 'left'
          }
          function ChangeFontSize()
          {
              // thay đổi font-size của thẻ có id="IdName"
              var color = document.getElementById('IdName').style.fontSize = '20px'
          }
        </script>
        <p id="IdName" >Chào bạn, chúc bạn ngày mới vui vẻ !</p>
      
        <input type="button" value="đổi màu" onclick="ChangeColor()" />
        <input type="button" value="Căn phải" onclick="ChangeRight()" />
        <input type="button" value="Căn trái" onclick="ChangeLeft()" />
        <input type="button" value="Chữ to hơn" onclick="ChangeFontSize()" />
    </body>
</html>

Ví dụ : Ví dụ này mình sẽ đưa ra một phép tính "khó" để người dùng trả lời :D nếu trả lời đúng thì hiển thị đúng - chữ màu xanh, sai thì hiển thị sai - chữ màu đỏ, và ẩn chữ thông báo đi sau 2 giây.

Xem DEMO

<html>
    <body>
        <script language="javascript">
          function HideAlert()
          {
              // lấy Id của thẻ có id="IdAlert"
              var IdAlert = document.getElementById('IdAlert');
              setTimeout(function(){
                  IdAlert.innerHTML = "";
              },2000);
          }
          function TinhTong()
          {
            
              // lấy Id thẻ <p>
              var IdAlert = document.getElementById('IdAlert');
              
              // lấy giá trị textbox
              var ketqua = document.getElementById('Tong').value;
              if(ketqua == 2){
                  // gán text cho thẻ <p>
                  IdAlert.innerHTML = "Bạn trả lời đúng !";
                  // thay màu cho thẻ <p>
                  IdAlert.style.color = "blue";
              }
              else
              {
                  // gán text cho thẻ <p>
                  IdAlert.innerHTML = "Bạn trả lời sai !";
                  // thay màu cho thẻ <p>
                  IdAlert.style.color = "red";
              }
              // gọi hàm xóa text sau 2s
              HideAlert();
          }
          
        </script>
        1 + 1 = <input type="text" value="" id="Tong" /> <br/>
        <p id="IdAlert" ></p>
      
        <input type="button" value="Trả lời" onclick="TinhTong()" />
        
    </body>
</html>

Thao tác khá là đơn giản đúng không bạn, nhưng mình vẫn muốn nói là tất cả các bài toán lớn đều bắt đầu từ những bài toán đơn giản nhất nhé. Chúc bạn lập trình vui vẻ .