NIIT - ICT HÀ NỘI

Kiến thức lập trình

Tạo kiểu CSS bằng JS DOM

  • Tác giả NIIT - ICT HANOI

  • Ngày đăng 16/ 07/ 2020

  • Bình luận 0 Bình luận

Trong bài hướng tự học lập trình JS này, bạn sẽ tìm hiểu cách tạo kiểu CSS cho các phần tử thông qua JS DOM.

 

Tạo kiểu CSS với JS DOM

Tạo kiểu CSS với JS DOM

 

Tạo kiểu bằng JavaScript?

Đúng vậy, ngoài cách viết CSS thông thường trong file .css, bạn 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ử bạn muốn thao tác.

Và thông qua đó, bạn có thể áp dụng kiểu dáng (CSS) cho nó.

Đây cũng là cách mà chúng ta thường làm khi lập trình web, bởi có nhiều tác vụ bạn cần thay đổi, tạo kiểu CSS mà không được mở file .css.

Bạn 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í, v.v.

Ngay trong phần sau chúng ta sẽ thảo luận về các phương pháp tạo kiểu CSS khác nhau bằng JavaScript.

#1. Thiết lập kiểu nội tuyến cho phần tử thông qua JS DOM

Kiểu nội tuyến được áp dụng trực tiếp cho thành phần HTML cụ thể bằng thuộc tính style.

Trong JavaScript, thuộc tính style được sử dụng để lấy hoặc đặt kiểu nội tuyến của một phần tử.

Ví dụ sau sẽ đặt thuộc tính màu và phông chữ của một phần tử với id = 'intro'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Thiết lập kiểu nội tuyến bằng JS DOM</title>
</head>
<body>
    <p id="intro">Đâ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 tạo kiểu
        var elem = document.getElementById("intro");
    
        // Áp dụng kiểu cho phần tử
        elem.style.color = "blue";
        elem.style.fontSize = "18px";
        elem.style.fontWeight = "bold";
    </script>
</body>
</html>

Trong ví dụ trên bạn đã thấy, chúng ta sử dụng JS DOM để trỏ đến phần từ cần tạo kiểu.

Sau đó áp dụng kiểu phần tử đó bằng cú pháp như:

<JS DOM>.style.<Thuộc tính cần CSS> = "<Giá trị>";

Ở trong CSS, bạn thường thấy thuộc tính viết như thế này, ví dụ:

    + font-size

    + font-weight

    + border-left-style

Nhưng khi sử dụng JS DOM để thao tác thì chúng ta sẽ viết tên thuộc tính kiểu camel case (Kiểu con lạc đà), có nghĩa là:

    + Từ đầu tiên sẽ viết thường toàn bộ

    + Từ tiếp theo trở đi sẽ viết HOA chữ cái đầu

Đây là cách chúng ta sẽ viết thuộc tính trong khi sử dụng JS DOM:

    + fontSize

    + fontWeight

    + borderLeftStyle

    + ...

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

Tương tự, bạn 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ụ sau sẽ 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
        console.log(elem.style.color); // blue
        console.log(elem.style.fontSize); // 20px
        console.log(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ử, bạn có thể sử dụng phương thức window.getComputingStyle(), như trong ví dụ sau:

<!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
        console.log(styles.getPropertyValue("color"));  // rgb(255, 0, 0)    
        console.log(styles.getPropertyValue("font-size"));  // 20px
        console.log(styles.getPropertyValue("font-weight"));  // 700
        console.log(styles.getPropertyValue("font-style"));  // italic
    </script>
</body>
</html>

Lưu ý: Giá trị 700 cho trọng số phông chữ thuộc tính CSS giống như từ khóa bold. Từ khóa red là rgb(255,0,0)

Đó là cách lấy thông tin thuộc tính, ngược lại, để thêm thuộc tính bạn có thể tham khảo trên Mozilla.

#3. Thêm class cho phần từ bằng JS DOM

Bạn 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 JavaScript, vì vậy JavaScript sử dụng thuộc tính className để chỉ giá trị của thuộc tính class của HTML.

Ví dụ sau sẽ chỉ ra cách 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ử div có id = '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>

Bạn có thể hiểu cách làm này như là thay thế, nối chuỗi trong JavaScript

    + 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ử "+="

Ví dụ, class hiện có là class="disabled"

Sau khi thực hiện elem.classnam += " highlight"; thì kết quả chúng ta nhận được là:

    +... class="disabled highlight" ...

Ngoài ra, chúng ta còn nhiều cách để thao tác với các class CSS bằng JS DOM.

Bạn có thể sử dụng thuộc tính classList để lấy, đặt hoặc xóa các class CSS dễ dàng khỏi một phần tử.

Thuộc tính này được hỗ trợ trong tất cả các trình duyệt chính trừ Internet Explorer trước phiên bản 10. Đây là một ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ví dụ về JS classList</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Thông tin gì đấy!</div>
    
    <script>
        // Chọn đến phần tử cần thao tác
        var elem = document.getElementById("info");
    
        // Thêm mới một class
        elem.classList.add("hide");
        // Thêm nhiều classs
        elem.classList.add("note", "highlight");
        // Loại bỏ một class nào đó
        elem.classList.remove("hide");
        // Loại bỏ nhiều class
        elem.classList.remove("disabled", "note");

        // Nếu class tồn tại thì loại bỏ nó
        // Nếu class chưa tồn tại thì thêm nó
        elem.classList.toggle("visible");
     
        // Kiểm tra xem class có tồn tại hay không
        if(elem.classList.contains("highlight")) {
            alert("Phần tử có đã có class được chỉ định.");
        }
    </script>
</body>
</html>

Như vậy là qua bài hướng dẫn này mình đã giúp bạn biết cách thiết lập kiểu nội tuyến cũng như cách lấy, và áp dụng thuộc tính, class cho phần tử bằng JS DOM.

Hi vọng bài hướng dẫn sẽ giúp bạn học JS tốt hơn.

>> Muốn học Lập trình Web bài bản thì tham khảo ngay KHÓA HỌC LẬP TRÌNH FULL STACK tại NIIT - ICT Hà Nội.

Chúc bạn thành công!

>> Đọc thêm: DOM Selector trong JavaScript

Tags
Bài viết liên quan
 
Chat với chúng tôi