Hướng dẫn can you replace css with javascript? - bạn có thể thay thế css bằng javascript không?

CSS là để thay đổi thẩm mỹ, trong phát triển web, chúng tôi gọi đây là "phong cách". JavaScript dành cho logic, thường được gọi là "chức năng".

Tôi nghĩ rằng sự hiểu lầm của bạn bắt nguồn từ thực tế là JavaScript có thể được sử dụng để thao túng các kiểu CSS.

Ví dụ: giả sử bạn có một đoạn văn:

<p id="myText">some text</p>

Bây giờ chúng ta hãy giả sử bạn muốn làm cho văn bản đỏ. Bạn có thể thêm phong cách vào HTML ...

<p id="myText" style="color: red;">some text</p>

... Tuy nhiên, nếu bạn sử dụng cùng một mã trên nhiều trang (ví dụ: thanh điều hướng) và muốn thay đổi nó sau này, bạn sẽ cần thực hiện thay đổi trên mỗi trang. Điều này làm cho các bản cập nhật rất tốn thời gian (chưa kể điều này làm cho rất nhiều mã không cần thiết). Do đó, cách ưa thích để làm điều này là với CSS; Thêm dòng sau vào bảng kiểu bên ngoài.

p#myText{ color: red; }

Với bảng kiểu bên ngoài, bạn có thể thay đổi kiểu ở một nơi và có hiệu ứng tất cả các trang. Bây giờ, bạn cũng có thể làm điều này với JavaScript ...

document.getElementById("myText").style.color = "red";

... Tuy nhiên, JavaScript chỉ thực thi sau khi DOM được tải đầy đủ. Trước tiên, người dùng sẽ xem văn bản là màu đen, và sau đó nó sẽ thay đổi thành màu đỏ khi trang tải. Ngoài ra, những thay đổi này đối với DOM làm cho máy khách làm việc thêm và có thể khiến trang web hoặc ứng dụng của bạn chạy chậm.

Trong mọi trường hợp, tôi chắc chắn sẽ dành nhiều thời gian hơn vào việc học JavaScript. Bạn sẽ có thể làm nhiều hơn nữa với JavaScript. Bạn có thể quay lại CSS khi bạn sẵn sàng làm cho chức năng tuyệt vời của mình trông đẹp hơn và cung cấp tín hiệu trực quan cho người dùng đang học cách sử dụng nó.

JavaScript là tất cả về các công cụ động và xử lý các thay đổi CSS động chỉ là một trong những kịch bản mà JavaScript chính xác là những gì chúng ta cần.

Với JavaScript, chúng tôi có thể đặt các kiểu CSS cho một hoặc nhiều phần tử trong DOM, sửa đổi chúng, xóa chúng hoặc thậm chí thay đổi toàn bộ bảng kiểu cho tất cả các trang của bạn.

Chúng ta hãy đi vào những cách khác nhau mà chúng ta có thể làm được điều này:

1. Thay đổi các thuộc tính nội tuyến CSS với JavaScript

Đặt các kiểu riêng lẻ trực tiếp từ JavaScript là một trong những kịch bản phổ biến nhất khi xử lý các kiểu CSS động.

Cách này cho phép bạn thay đổi kiểu CSS cho một hoặc nhiều yếu tố có trong DOM.

Tât cả nhưng điêu bạn phải lam la:

1. Truy vấn phần tử hiện diện trong DOM.
2. Và đặt phong cách hoặc kiểu dáng cho nó từng cái một.

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

Lưu ý rằng khi cài đặt các kiểu CSS bằng thuộc tính

p#myText{ color: red; }

1, bạn phải viết các thuộc tính CSS trong Camelcase. Thay vì sử dụng dấu gạch ngang

p#myText{ color: red; }

2 để tách các từ bạn sẽ phải viết bằng chữ ký chữ cái đầu tiên của mỗi từ. (

p#myText{ color: red; }

3,

p#myText{ color: red; }

4)

Nếu bạn thực thi mã này giống như thế này, bạn sẽ nhận thấy sự thay đổi diễn ra trên tải trang.

Nếu bạn muốn thay đổi các kiểu CSS một cách linh hoạt, bạn sẽ phải đính kèm phần mã này vào một số sự kiện.

Ví dụ: nếu bạn muốn thay đổi kiểu phần tử của mình khi nhấp vào nút, thì trước tiên bạn phải nghe sự kiện

p#myText{ color: red; }

Đây là một ví dụ:

const button = document.querySelector('button');
button.addEventListener('click', () => {
    const element = document.querySelector('.demo');
    element.style.backgroundColor = 'red';
});

Xem bút trên Codepen.

Lưu ý rằng khi bạn áp dụng các kiểu cụ thể bằng JavaScript, các kiểu này đã được ưu tiên hơn các kiểu được áp dụng bên ngoài trên bảng kiểu và thậm chí cho các kiểu được áp dụng nội tuyến, trong chính phần tử HTML.

.demo{
    color: red;
}

<!-- Element with inline styles declared in the HTML -->
<div class="demo" style="color: blue;">Demo</div>

Trong trường hợp này, ví dụ, chúng ta có một yếu tố có kiểu nội tuyến cung cấp cho nó một nền màu vàng.

Nếu bây giờ chúng tôi đặt thuộc tính CSS

p#myText{ color: red; }

p#myText{ color: red; }

p#myText{ color: red; }

Xem bút trên Codepen.

Lưu ý rằng khi bạn áp dụng các kiểu cụ thể bằng JavaScript, các kiểu này đã được ưu tiên hơn các kiểu được áp dụng bên ngoài trên bảng kiểu và thậm chí cho các kiểu được áp dụng nội tuyến, trong chính phần tử HTML.

Trong trường hợp này, ví dụ, chúng ta có một yếu tố có kiểu nội tuyến cung cấp cho nó một nền màu vàng.

Nếu bây giờ chúng tôi đặt thuộc tính CSS

p#myText{ color: red; }

p#myText{ color: red; }

p#myText{ color: red; }

element.style.display = 'block';
element.style.width = '100px';
element.style.backgroundColor = 'red';
element.style.border = '2px';
element.style.fontSize = '12px';
element.style.color = 'white';
element.style.margin = '20px';
element.style.paddingLeft = '10px';
element.style.paddingBottom = '10px';
element.style.lineHeight = '13px';

2. Đặt nhiều kiểu CSS cùng một lúcat the same time without so much code repetition.

Hãy tưởng tượng bạn phải áp dụng, giả sử 5 hoặc 10 kiểu cho một yếu tố duy nhất.

Bạn có thể đi từng cái một và có một cái gì đó như sau:

Nhưng có lẽ bạn đang tìm kiếm một cách "thông minh hơn" để thay đổi tất cả chúng cùng một lúc mà không có quá nhiều sự lặp lại mã.

// Defining all our CSS styles
const myStyles = `
    display: block;
    width: 80%;
    background-color: red;
    border: 2px;
    font-size: 5em;
    color: white;
    margin: 20px;
    padding-left: 10px;
    padding-bottom: 10px;
    border: 2px solid black;
`;
const element = document.querySelector('.demo');
element.style.cssText = myStyles;

Xem bút trên Codepen.

Lưu ý rằng khi bạn áp dụng các kiểu cụ thể bằng JavaScript, các kiểu này đã được ưu tiên hơn các kiểu được áp dụng bên ngoài trên bảng kiểu và thậm chí cho các kiểu được áp dụng nội tuyến, trong chính phần tử HTML.

Trong trường hợp này, ví dụ, chúng ta có một yếu tố có kiểu nội tuyến cung cấp cho nó một nền màu vàng.

<p id="myText" style="color: red;">some text</p>

<p id="myText" style="color: red;">some text</p>

<p id="myText" style="color: red;">some text</p>

Nếu bây giờ chúng tôi đặt thuộc tính CSS

p#myText{ color: red; }

p#myText{ color: red; }

p#myText{ color: red; }

Đây là một ví dụ:

<p id="myText" style="color: red;">some text</p>

<p id="myText" style="color: red;">some text</p>

Xem bút trên Codepen.

Lưu ý rằng khi bạn áp dụng các kiểu cụ thể bằng JavaScript, các kiểu này đã được ưu tiên hơn các kiểu được áp dụng bên ngoài trên bảng kiểu và thậm chí cho các kiểu được áp dụng nội tuyến, trong chính phần tử HTML.

Trong trường hợp này, ví dụ, chúng ta có một yếu tố có kiểu nội tuyến cung cấp cho nó một nền màu vàng.

Nếu bây giờ chúng tôi đặt thuộc tính CSS

p#myText{ color: red; }

p#myText{ color: red; }

p#myText{ color: red; }

1. 2. Đặt nhiều kiểu CSS cùng một lúc

2. Hãy tưởng tượng bạn phải áp dụng, giả sử 5 hoặc 10 kiểu cho một yếu tố duy nhất.

Bạn có thể đi từng cái một và có một cái gì đó như sau:modifying the CSS stylesheet directly will come on handy.

Nhưng có lẽ bạn đang tìm kiếm một cách "thông minh hơn" để thay đổi tất cả chúng cùng một lúc mà không có quá nhiều sự lặp lại mã.

Nếu đó là trường hợp, thì tôi có tin tốt cho bạn!

Bạn thực sự có thể chuyển giá trị

p#myText{ color: red; }

document.getElementById("myText").style.color = "red";

<p id="myText" style="color: red;">some text</p>

Thậm chí tốt hơn, chúng ta có thể sử dụng các loại chuỗi chữ để giữ chúng tách biệt trong các dòng khác nhau như bạn làm trong các bảng kiểu của bạn.

Xem bút trên Codepen.

Lưu ý rằng khi bạn áp dụng các kiểu cụ thể bằng JavaScript, các kiểu này đã được ưu tiên hơn các kiểu được áp dụng bên ngoài trên bảng kiểu và thậm chí cho các kiểu được áp dụng nội tuyến, trong chính phần tử HTML.

Trong trường hợp này, ví dụ, chúng ta có một yếu tố có kiểu nội tuyến cung cấp cho nó một nền màu vàng.

Lý do cho nó có thể là:

1. Bạn có một ứng dụng web hỗ trợ nhiều chủ đề và cho phép người dùng thay đổi chúng một cách linh hoạt.

2. Bạn có thể muốn đóng gói một thành phần trong một tệp JS duy nhất thay vì phải bao gồm cả hai tệp, JS và CSS.

Cách thức hoạt động này khá đơn giản:

1. 1- Chúng tôi viết nội dung cho biểu định kiểu mới của chúng tôi bằng cách sử dụng các mẫu chữ.
2. 2- Chúng tôi chọn phần tử

   document.getElementById("myText").style.color = "red";
   

   7 của trang để nối các kiểu dáng mới của chúng tôi.
3. 3- Chúng tôi tạo một phần tử biểu định kiểu bằng cách sử dụng

   document.getElementById("myText").style.color = "red";
   

   8
4. 4- Chúng tôi nối nội dung biểu định kiểu của mình vào phần tử kiểu mới bằng cách sử dụng

   document.getElementById("myText").style.color = "red";
   

   9 và

   const element = document.querySelector('.demo');
   element.style.backgroundColor = 'red';

   0.

Đây là mã:

<p id="myText" style="color: red;">some text</p>

Và đây là ví dụ CodePen để bạn có thể tự mình kiểm tra và sửa đổi một vài điều theo nhu cầu của bạn:

Xem bút trên Codepen.

5. Ghi đè CSS const element = document.querySelector('.demo');element.style.backgroundColor = 'red';1 Phong cách với JavaScript

Chúng ta đều biết quy tắc: "Tránh sử dụng! Quan trọng". Nhưng này! Đôi khi nó thực sự cần thiết hoặc nó chỉ nằm ngoài tầm kiểm soát của chúng tôi.

Thuộc tính ưu tiên

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

Vậy ... điều gì sẽ xảy ra nếu chúng ta cần ghi đè lên phong cách được tuyên bố trước đây bằng cách sử dụng

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

Hãy tưởng tượng chúng ta có yếu tố của chúng ta:

<p id="myText" style="color: red;">some text</p>

Và bảng kiểu sử dụng quy tắc

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

<p id="myText" style="color: red;">some text</p>

Tất cả những gì bạn phải làm là áp dụng tham số

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

<p id="myText" style="color: red;">some text</p>

Đây là một ví dụ:

p#myText{ color: red; }

Lưu ý cách sử dụng

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

6, chúng tôi chỉ định các thuộc tính CSS chính xác giống như cách chúng tôi làm trong bảng kiểu của mình. Sử dụng dấu gạch ngang

p#myText{ color: red; }

2 để tách các từ. (

const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';

9,

const button = document.querySelector('button');
button.addEventListener('click', () => {
    const element = document.querySelector('.demo');
    element.style.backgroundColor = 'red';
});

0)

Xem bút trên Codepen.

References:

• 5. Ghi đè CSS

  const element = document.querySelector('.demo');
  element.style.backgroundColor = 'red';

  1 Phong cách với JavaScript

Chúng ta đều biết quy tắc: "Tránh sử dụng! Quan trọng". Nhưng này! Đôi khi nó thực sự cần thiết hoặc nó chỉ nằm ngoài tầm kiểm soát của chúng tôi.

• Thuộc tính ưu tiên

  const element = document.querySelector('.demo');
  element.style.backgroundColor = 'red';

  1 đảm bảo rằng kiểu như vậy sẽ ghi đè bất kỳ kiểu được khai báo nội tuyến nào (được viết trong chính phần tử HTML) cũng như bất kỳ quy tắc nào được khai báo trước đây áp dụng cho phần tử của bạn.
• Vậy ... điều gì sẽ xảy ra nếu chúng ta cần ghi đè lên phong cách được tuyên bố trước đây bằng cách sử dụng

  const element = document.querySelector('.demo');
  element.style.backgroundColor = 'red';

  1?
• Hãy tưởng tượng chúng ta có yếu tố của chúng ta:
• Và bảng kiểu sử dụng quy tắc

  const element = document.querySelector('.demo');
  element.style.backgroundColor = 'red';

  1 như vậy:

JS có thể thay thế CSS không?

Làm cách nào để chuyển CSS sang JavaScript?

JavaScript có thể thay thế HTML và CSS không?

Có thay thế cho CSS không?