Làm cách nào để thêm thuộc tính CSS trong JavaScript?

JavaScript là tất cả về nội dung động và xử lý các thay đổi CSS động chỉ là một trong những tình huống mà JavaScript chính xác là thứ chúng ta cần

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

Hãy tìm hiểu những cách khác nhau mà chúng ta có thể đạt được điều này

1. Thay đổi thuộc tính nội tuyến CSS bằng JavaScript

Đặt các kiểu riêng lẻ trực tiếp từ JavaScript là một trong những tình huống 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 thành phần có trong DOM

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

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

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

Lưu ý rằng khi thiết lập các kiểu CSS bằng thuộc tính

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

7, 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

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

8 để phân tách các từ, bạn sẽ phải viết hoa chữ cái đầu tiên của mỗi từ. (

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

9,

.demo{
    color: red;
}

0)

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

Nếu bạn muốn tự động thay đổi kiểu CSS, 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 lắng nghe sự kiện

.demo{
    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 biểu định 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>

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

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

.demo{
    color: red;
}

.demo{
    color: red;
}

.demo{
    color: red;
}

Xem Bút trên CodePen

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

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

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

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';

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ần lặp lại mã quá nhiều

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 một giá trị

.demo{
    color: red;
}

.demo{
    color: red;
}

Thậm chí tốt hơn, chúng ta có thể sử dụng loại chuỗi ký tự mẫu để tách chúng thành các dòng khác nhau như bạn làm trong biểu định kiểu của mình

// 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

Nếu bạn đang tìm hiểu JavaScript, bạn có thể muốn kiểm tra danh sách của chúng tôi với Những cuốn sách hay nhất để học JavaScript hoặc Cách tốt nhất để học JavaScript là gì

2. Thay đổi lớp CSS trong JavaScript

<div class="demo">Hello</div>

// Adding a CSS class name to an element
const element = document.querySelector('.demo');
element.classList.add('new-class');

.new-class{
    background: red;
}

Theo cách tương tự, bạn cũng có thể xóa một số lớp nhất định bằng cách sử dụng

.demo{
    color: red;
}

.demo{
    color: red;
}

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

// Removing an existing class from an element
const element = document.querySelector('.demo');
element.classList.removeClass('.new-class');

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

Xem Bút trên CodePen

3. Tự động thay đổi biểu định kiểu CSS

Giả sử bây giờ bạn không muốn thêm các kiểu nội tuyến vào một phần tử hoặc áp dụng một lớp cho nó. Thay vào đó, bạn muốn áp dụng thay đổi ở cấp biểu định kiểu. Tại sao?

Có một vài lý do

1. Bạn có thể muốn áp dụng thay đổi cho tất cả các thành phần bằng một bộ chọn nhất định. Nhưng không chỉ với các phần tử hiện có trên HTML, mà còn với tất cả các phần tử trong tương lai sẽ được thêm động sau này

2. Có thể có một số lượng lớn các phần tử chia sẻ bộ chọn mà bạn muốn áp dụng các thay đổi cho. Hãy tưởng tượng 500 phần tử chia sẻ bộ chọn của bạn hoặc thậm chí 1K, 5K, 10K. Phải chọn tất cả các phần tử đó bằng JavaScript và sau đó lặp qua chúng để thay đổi kiểu (hoặc thêm lớp) sẽ CỰC KỲ chậm

Đây là nơi trực tiếp sửa đổi biểu định kiểu CSS sẽ hữu ích

Bạn có thể chọn các biểu định kiểu của tài liệu bằng cách sử dụng

.demo{
    color: red;
}

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

Sau đó, bạn sẽ lặp qua tất cả các quy tắc của nó và nhận quy tắc bạn cần sửa đổi. Trong trường hợp này, nếu bạn muốn sửa đổi lớp

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

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

Đây là mã

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

Và đây là ví dụ Codepen mà bạn có thể chơi với

Xem Bút trên CodePen

4. Tự động thêm và xóa biểu định kiểu CSS

Trong một số trường hợp, chúng tôi có thể muốn thêm một biểu định kiểu hoàn toàn mới hoặc thậm chí thay thế một biểu định kiểu hiện có

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, tệp JS và tệp CSS

Cách thức hoạt động của nó 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 mình bằng cách sử dụng chữ mẫu
2. 2- Chúng tôi chọn phần tử

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

   3 của trang để thêm biểu định kiểu 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

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

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

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

   5 và

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

   6

Đây là mã

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

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

Xem Bút trên CodePen

5. Ghi đè kiểu CSS <!-- Element with inline styles declared in the HTML --><div class="demo" style="color: blue;">Demo</div>7 bằng JavaScript

Chúng ta đều biết quy luật. "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ó nằm ngoài tầm kiểm soát của chúng ta

Thuộc tính ưu tiên

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

Vì thế. Nếu chúng ta cần ghi đè kiểu đã được khai báo trước đó bằng cách sử dụng

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

Hãy tưởng tượng chúng ta có phần tử của chúng ta

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

Và biểu định kiểu sử dụng quy tắc

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

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

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

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';

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';

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

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

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

Lưu ý khi sử dụng

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, chúng tôi chỉ định chính xác các thuộc tính CSS giống như cách chúng tôi thực hiện trong biểu định kiểu của mình. Sử dụng dấu gạch ngang

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

8 để ngăn cách các từ. (

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';

5,

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';

6)

Làm cách nào để đặt thuộc tính kiểu CSS trong JavaScript?

Đầu tiên, chọn phần tử bằng cách sử dụng các phương thức DOM như tài liệu. truy vấnSelector(). Phần tử được chọn có thuộc tính kiểu cho phép bạn đặt các kiểu khác nhau cho phần tử. Sau đó, đặt các giá trị thuộc tính của đối tượng kiểu

Bạn có thể thêm CSS vào JavaScript không?

Tệp CSS được sử dụng để mô tả cách hiển thị các phần tử HTML. Có nhiều cách khác nhau để thêm tệp CSS vào tài liệu HTML. JavaScript cũng có thể được sử dụng để tải tệp CSS trong tài liệu HTML .

Làm cách nào để thêm CSS vào chức năng JavaScript?

Bây giờ có thể tạo đối tượng CSSStyleSheet từ JavaScript. // Tạo biểu định kiểu được chia sẻ của chúng tôi. const sheet = new CSSStyleSheet(); . replaceSync('# target {color. darkseagreen}'); . tài liệu

Làm cách nào để có được thuộc tính CSS trong JavaScript?

Có thể lấy CSS của một phần tử bằng cách sử dụng hàm phần tử getComputingStyle trong JavaScript. Nó trả về một đối tượng JavaScript chứa các thuộc tính CSS và giá trị của chúng. Đối tượng này được lập chỉ mục và có thể lặp lại qua tên thuộc tính. getPropertyValue(property) được sử dụng để lấy giá trị của một thuộc tính.