1. Dom Css trong JavaScript là gì?

Ngoài cách viết CSS thông thường trong file .css , ta cũng có thể tạo kiểu CSS bằng cách sử dụng JS DOM. Bởi vì JS DOM cũng giống như một selector vậy, nó trỏ đến phần tử ta muốn thao tác. Và thông qua đó, có thể áp dụng kiểu dáng (CSS) cho nó.

DOM CSS sẽ có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML. Ta có thể áp dụng hầu hết tất cả các kiểu cho các phần tử trong website như: Phông chữ, màu sắc, lề, viền, hình nền, căn chỉnh văn bản, chiều rộng và chiều cao, vị trí,…

Tất cả thuộc tính CSS của thẻ HTML đều được lưu trữ trong thuộc tính style của các đối tượng HTML. Nhưng ta không thể sử dụng DOM HTML để thiết lập hay xóa bỏ CSS được mà phải thông qua một đối tượng biệt khác, đó là style . Đối tượng style này sẽ chứa tất cả các thuộc tính của CSS giúp ta dễ dàng thao tác với chúng.

Để CSS cho các thẻ HTMl bằng Js ta dùng cú pháp:

element.style.propertyName = value;

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 xét.
  • value là giá trị của thuộc tính đó.

Chú ý

Trường hợp thuộc tính có dấu gạch ngang như: font-size , line-height , margin-bottom thì thì nó sẽ có tên là fontSize , lineHeight , marginBottom, … Nghĩa là sẽ bỏ đi dấu gạch ngang và viết hoa ký tự đầu tiên của chữ thứ hai.

Ví dụ: thay đổi kiểu của một thẻ <p> :

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

2. Lấy thông tin kiểu của các phần tử bằng JS DOM

Tương tự, ta có được các kiểu được áp dụng trên các thành phần HTML bằng cách sử dụng thuộc tính kiểu.

Ví dụ lấy thông tin kiểu từ phần tử có id=’intro’ .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Lấy thông tin kiểu bằng JS DOM</title>
</head>
<body>
    <p id="intro" style="color:blue; font-size:20px;">Đây là một đoạn văn bản thông thường.</p>
    <p>Đây là một đoạn văn bản khác</p>
        
    <script>
        // Đầu tiên, hãy trỏ đến phần tử
        // Cần lấy thông tin kiểu
        var elem = document.getElementById("intro");
    
        // In thông tin kiểu ra màn hình console
        document.write(elem.style.color); // blue
        document.write(elem.style.fontSize); // 20px
        document.write(elem.style.fontWeight); // Không có gì
    </script>
</body>
</html>

Thuộc tính style không hữu ích lắm khi lấy thông tin kiểu từ các phần tử, vì nó chỉ trả về các quy tắc kiểu nội tuyến của phần tử. Nếu kiểu được định nghĩa theo cách được nhúng trong cặp thẻ <style></style> hoặc file css bên ngoài thì nó không lấy được.

Do đó, để lấy các giá trị của tất cả các thuộc tính CSS thực sự được sử dụng để kết xuất một phần tử, ta có thể sử dụng phương thức window.getComputingStyle()

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Computed Style Demo</title>
<style type="text/css">
    #intro {        
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Đây là một đoạn văn bản.</p>
    <p>Đây là một đoạn văn bản khác.</p>
        
    <script>
        // Chọn đến phần tử
        var elem = document.getElementById("intro");
     
        // Lấy tất cả thông tin kiểu
        var styles = window.getComputedStyle(elem);
     
        // In thông tin kiểu ra màn hình console
         document.write(styles.getPropertyValue("color"));  // rgb(255, 0, 0)    
         document.write(styles.getPropertyValue("font-size"));  // 20px
         document.write(styles.getPropertyValue("font-weight"));  // 700
         document.write(styles.getPropertyValue("font-style"));  // italic
    </script>
</body>
</html>

3. Thêm Class vào cho phần tử bằng JS Dom

Ta cũng có thể lấy hoặc áp dụng các class CSS cho các phần tử HTML bằng thuộc tính className . Vì class là một từ dành riêng trong Js, vì vậy Js sử dụng thuộc tính className để chỉ giá trị của thuộc tính class của HTML.

Ví dụ: thêm một lớp mới hoặc thay thế tất cả các class hiện có thành một phần tử divid=’info’

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Thêm hoặc thay thế class của HTML bằng JS DOM</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Một thông tin nào đó!</div>
        
    <script>
        // Chọn đến phần tử
        var elem = document.getElementById("info");
        
        // Thêm hoặc thay thế tất cả class bằng class note
        elem.className = "note";
        // Thêm vào một class mới là class highlight
        elem.className += " highlight";
    </script>
</body>
</html>

Ta có thể hiểu cách làm này giống việc nối chuỗi thay thế trong Js:

  • Muốn thay thế tất cả class hiện có bằng một class mới, chúng ta sử dụng toán tử =
  • Muốn thêm class mới vào thì sử dụng toán tử +=