Thuộc tính html dom nào cho phép bạn thay đổi kiểu css của các phần tử html?

Javascript nổi tiếng với khả năng thay đổi cấu trúc trang web, thêm bớt phần tử HTML theo ý muốn. Tiêu chuẩn Javascript cũng cho phép sửa đổi nhiều hơn đối với các trang web thông qua kiểu dáng trực quan của các thành phần

Sửa đổi CSS thông qua Javascript không ảnh hưởng đến Mô hình đối tượng tài liệu (DOM) vì nó xử lý các sửa đổi về phong cách trên các thành phần trang web hiện có. Bất kỳ phần tử HTML nào đều có thể nhắm mục tiêu thông qua Javascript CSS

Bài viết này thảo luận về cách sửa đổi kiểu phần tử HTML bằng Javascript CSS, tiếp theo là những lợi ích và hạn chế tiềm năng của Javascript CSS so với các tệp CSS bên ngoài. Cuối cùng, bài viết này cung cấp hướng dẫn chọn thời điểm sử dụng Javascript CSS

Javascript CSS với Thuộc tính kiểu phần tử

Mọi phần tử HTML trong Javascript DOM đều chứa một thuộc tính đối tượng Javascript có tên là style. Đối tượng style chứa nhiều thuộc tính tương ứng với thuộc tính CSS, vì vậy bạn có thể đặt thuộc tính trên đối tượng style để thay đổi trực tiếp kiểu CSS của phần tử

Tên thuộc tính đối tượng style phù hợp với thuộc tính CSS cơ bản. Ví dụ: thuộc tính CSS Javascript để đặt màu nền trước của phần tử hoàn toàn giống với thuộc tính CSS thông thường của nó

color: black;                       // CSS
document.body.style.color = "black" // Javascript CSS

Tất cả các thuộc tính CSS đều có thể truy cập trực tiếp thông qua đối tượng style; . Vì không có đối tượng con nên một số tên thuộc tính CSS hơi dài trong Javascript, chẳng hạn như backgroundColor, nhưng tính đơn giản của việc truy cập mọi thứ trực tiếp từ đối tượng kiểu thường vượt trội hơn so với độ dài thuộc tính rườm rà không thường xuyên

Trong ví dụ sau, thuộc tính backgroundColor ở dòng đầu tiên được sử dụng trong trường hợp lạc đà làm thuộc tính của đối tượng style. Dòng thứ hai cố gắng tạo thuộc tính màu nền không chính xác, với màu sắc là thuộc tính phụ của thuộc tính kiểu "nền". Không có trường hợp lạc đà trong dòng thứ hai, nhưng các nhà phát triển sẽ được yêu cầu ghi nhớ hệ thống phân cấp thuộc tính phức tạp nếu Javascript CSS chỉ định tất cả các thuộc tính theo cách này

document.body.style.backgroundColor = "black";   // correct
document.body.style.background.color = "black";  // wrong

Vì tiêu chuẩn Javascript và tiêu chuẩn CSS được quản lý bởi các tổ chức khác nhau nên luôn có một số độ trễ giữa các bổ sung gần đây nhất cho tiêu chuẩn CSS và khả năng thay đổi các thuộc tính đó bằng Javascript CSS. Độ trễ đã giảm bớt trong những năm gần đây vì tiêu chuẩn Javascript hiện được cập nhật hàng năm

Javascript CSS so với CSS bên ngoài

CSS Javascript trông hơi khác so với CSS bên ngoài vì Javascript có các quy ước ngôn ngữ khác với CSS thuần túy. Nhiều thuộc tính trong các tệp CSS bên ngoài bao gồm dấu gạch ngang trong tên của chúng và Javascript không cho phép dấu gạch ngang trong tên thuộc tính của nó

Javascript CSS xóa dấu gạch nối khỏi tên thuộc tính CSS và xác định các từ bằng cách sử dụng trường hợp lạc đà. Sử dụng trường hợp lạc đà có nghĩa là các thuộc tính CSS chỉ có một từ trông giống hệt nhau trong các tệp CSS bên ngoài so với Javascript CSS, trong khi các thuộc tính có nhiều từ trông khác nhau

// The "margin" property in external CSS and Javascript CSS.
margin: 0px;
document.body.style.margin = "0px";

// The "background color" property in external CSS and Javascript CSS.
background-color: white;
document.body.style.backgroundColor = "white";

Thay đổi CSS Javascript bằng Sự kiện

Các thay đổi đối với Javascript CSS không tự xảy ra; . Mọi tương tác mà người dùng thực hiện với một trang web được gọi là “sự kiện” và Javascript phản ứng với những sự kiện này bằng các cấu trúc được gọi là trình xử lý sự kiện

Một nơi phổ biến để tìm Javascript CSS là trong trình xử lý sự kiện kích hoạt khi nhấp vào nút, mở phần thu gọn của trang web. Trong ví dụ này, một trình xử lý sự kiện được thêm vào một nút và trình xử lý kiểm tra trạng thái hiển thị của phần tử HTML có ID “myDiv” khi nút được nhấp. Nếu phần tử “myDiv” bị ẩn, phần tử này sẽ được đặt để hiển thị sau khi nhấp vào nút và ngược lại

let button = document.createElement('button');

button.addEventListener('click', event => {
    let myDiv = document.getElementById("myDiv");
    if (myDiv.style.display === "none") {
        document.getElementById("myDiv").style.display = "block";
    } else {
        document.getElementById("myDiv").style.display = "none";
    }
});

Chọn sử dụng Javascript CSS

Khi chọn có sử dụng Javascript CSS hay không, bảo trì là mối quan tâm chính. Duy trì Javascript CSS có thể khó hơn duy trì các tệp CSS bên ngoài vì bạn cần phải biết Javascript và CSS đồng thời. Trừ khi bạn chắc chắn rằng bất kỳ ai đọc mã của bạn sẽ hiểu Javascript và CSS, tốt nhất bạn nên tách Javascript và CSS của mình ra khỏi nhau

Vì Javascript không phải lúc nào cũng cập nhật các tính năng CSS mới nhất nên tốt nhất bạn nên sử dụng CSS bên ngoài khi dựa vào CSS mới nhất. Các thuộc tính CSS được thiết lập tốt sẽ đáng tin cậy trong Javascript, nhưng bất kỳ thứ gì mới nhất sẽ không có sẵn trong tiêu chuẩn Javascript ngay lập tức

Phần kết luận

Javascript CSS sử dụng thuộc tính kiểu để sửa đổi kiểu phần tử HTML. Mặc dù về cơ bản nó hoạt động giống như các tệp CSS bên ngoài, Javascript CSS yêu cầu cú pháp hơi khác một chút. Những khác biệt về cú pháp này có thể gây nhầm lẫn cho các nhà phát triển bất cẩn

Đặt các thuộc tính CSS thông qua Javascript về mặt kỹ thuật là vi phạm tiên đề lập trình truyền thống rằng phần kiểu dáng của dự án phải được tách biệt khỏi cấu trúc và tập lệnh của nó. CSS xử lý kiểu dáng trực quan, do đó, việc kết hợp nó vào mã Javascript sẽ làm xáo trộn các ranh giới này

Nhiều nhà phát triển thấy việc duy trì Javascript CSS khó hơn so với các tệp CSS bên ngoài. Sử dụng Javascript CSS một cách cẩn thận và thực hiện các bước để đảm bảo nó rõ ràng cho các nhà phát triển trong tương lai

Đăng ký tham gia Chương trình cấp bằng cấp Nano về lập trình của chúng tôi ngay hôm nay để tìm hiểu thêm về Javascript CSS và các khái niệm lập trình khác

Đối tượng DOM nào có thể được sử dụng để thay đổi kiểu dáng CSS bằng JavaScript?

Thuộc tính nào của DOM hữu ích để lấy phần tử HTML và thay đổi nội dung của nó?

Phương pháp DOM nào có thể được sử dụng để đặt kiểu?

Thuộc tính phần tử DOM được sử dụng để tạo kiểu cho phần tử DOM là gì?