Hướng dẫn add multiple style in javascript - thêm nhiều kiểu trong javascript

Bạn có thể viết một chức năng sẽ thiết lập các khai báo riêng lẻ để không ghi đè lên bất kỳ khai báo hiện có nào mà bạn không cung cấp. Giả sử bạn có danh sách tham số đối tượng này của các khai báo:

const myStyles = {
  'background-color': 'magenta',
  'border': '10px dotted cyan',
  'border-radius': '5px',
  'box-sizing': 'border-box',
  'color': 'yellow',
  'display': 'inline-block',
  'font-family': 'monospace',
  'font-size': '20px',
  'margin': '1em',
  'padding': '1em'
};

Bạn có thể viết một chức năng trông như thế này:

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};

trong đó có một danh sách thuộc tính element

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
0 của các khai báo kiểu để áp dụng cho đối tượng đó. Đây là một ví dụ sử dụng:

const p = document.createElement('p');
p.textContent = 'This is a paragraph.';
document.body.appendChild(p);

applyStyles(p, myStyles);
applyStyles(document.body, {'background-color': 'grey'});

Trong một bài viết trước, chúng tôi đã xem xét các cách khác nhau để đặt các kiểu CSS thành một phần tử bằng Vanilla JavaScript.

Trong bài viết này, bạn sẽ tìm hiểu về một điều khác: thêm nhiều kiểu CSS cùng một lúc vào một yếu tố với JavaScript.

Thêm nhiều kiểu nội tuyến

Thuộc tính DOM Style là cách đơn giản nhất để thiết lập và nhận các kiểu CSS từ phần tử HTML trong JavaScript.

Thông thường, khi bạn muốn thêm nhiều thuộc tính CSS vào một phần tử, bạn phải đặt chúng riêng lẻ như hình dưới đây:

const btn = document.querySelector('.btn')

// set inline CSS styles
btn.style.width = '150px'
btn.style.height = '40px'
btn.style.color = 'blue'

Tuy nhiên, cách tiếp cận này không linh hoạt lắm. Nếu bạn quyết định thực hiện bất kỳ sửa đổi nào trong tương lai, bạn cần cập nhật mã tại nhiều vị trí.not very flexible. If you decide to make any modifications in the future, you need to update the code at more than one location.

Một cách để giải quyết vấn đề này là sử dụng thuộc tính

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
1 do thuộc tính
function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
2 cung cấp, như được hiển thị bên dưới:

btn.style.cssText = 'width: 150px; height: 40px; color: blue'

Mã ví dụ trên sẽ hoạt động hoàn hảo. Tuy nhiên, nhược điểm duy nhất là nó ghi đè lên tất cả các kiểu nội tuyến khác được áp dụng cho phần tử.

Một cách khác để áp dụng nhiều kiểu CSS ngay lập tức là sử dụng hàm

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
3:

const btn = document.querySelector('.btn')

// create styles object
const styles = {
  width: '150px',
  height: '40px',
  color: 'white',
  backgroundColor: 'black'
}

// apply styles to the button
Object.assign(btn.style, styles)

Mã trên là dễ đọc và có thể duy trì hơn. Ngoài ra

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
3 không ghi đè tất cả các kiểu nội tuyến hiện có. Thay vào đó, nó sẽ chỉ cập nhật các thuộc tính phù hợp với các khóa trong đối tượng
function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
5.

Thêm nhiều kiểu toàn cầu

Tôi đã thảo luận về ba phương pháp khác nhau để thêm nhiều kiểu toàn cầu trong bài viết trước; Phần tử

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
6,
function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
7 của CSSOM và các kiểu dáng có thể xây dựng.

Cách đơn giản là tạo một phần tử

function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
6 mới, hãy thêm các thuộc tính CSS của bạn bằng cách sử dụng
function applyStyles (el, styles) {
  for (const prop in styles) {
    el.style.setProperty(prop, styles[prop]);
  }
};
9 và nối nó vào DOM:

// create style element
const style = document.createElement('style')

// add CSS styles
style.innerHTML = `
    .btn {
        color: white;
        background-color: black;
        width: 150px;
        height: 40px;
    }
`

// append the style to the DOM in  section
document.head.appendChild(style)

Ngoài ra, bạn cũng có thể khai báo tất cả các kiểu CSS dưới dạng một lớp trong tệp CSS, như bên dưới:

.btn {
    color: white;
    background-color: black;
    width: 150px;
    height: 40px;
}

Và sau đó, chỉ cần thêm lớp vào phần tử bằng JavaScript:

const btn = document.querySelector('.btn')

// add CSS class
btn.classList.add('btn')

Đọc hướng dẫn này để tìm hiểu thêm về việc thiết lập các kiểu CSS bằng Vanilla JavaScript.

Mục đích của các hướng dẫn này là không khuyến khích việc sử dụng các lớp CSS. Thay vào đó, chỉ để học cách thao tác các kiểu CSS bằng JavaScript. Bạn nên luôn luôn sử dụng các lớp CSS bất cứ khi nào có thể. Tuy nhiên, thật tốt khi biết các thủ thuật này trong khi làm việc trên các dự án mà bạn không có quyền truy cập vào các tệp CSS.

Thích bài viết này? Theo dõi tôi trên Twitter và LinkedIn. Bạn cũng có thể đăng ký nguồn cấp dữ liệu RSS. Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

Chúng ta có thể thêm các kiểu bằng JavaScript không?

Chúng ta có thể sử dụng JavaScript để đặt trực tiếp một kiểu trên một phần tử và chúng ta cũng có thể sử dụng JavaScript để thêm hoặc xóa các giá trị lớp trên các phần tử sẽ thay đổi quy tắc kiểu nào được áp dụng., and we can also use JavaScript to add or remove class values on elements which will alter which style rules get applied.

HTML có thể có nhiều thẻ kiểu không?

Yếu tố phong cách cho phép các tác giả đặt các quy tắc bảng kiểu vào đầu tài liệu.HTML cho phép bất kỳ số lượng phần tử kiểu trong phần đầu của tài liệu.HTML permits any number of STYLE elements in the HEAD section of a document.

Làm cách nào tôi có thể áp dụng nhiều thuộc tính CSS bằng một phương thức jQuery duy nhất?

Áp dụng nhiều thuộc tính CSS bằng cách sử dụng một phương thức jQuery CSS ({key1: val1, key2: val2 ....).Bạn có thể áp dụng nhiều thuộc tính như bạn muốn trong một cuộc gọi.Tại đây bạn có thể chuyển khóa như tài sản và val theo giá trị của nó như được mô tả ở trên.CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call. Here you can pass key as property and val as its value as described above.

Làm thế nào bạn sẽ thêm nhiều lớp cho một phần tử?

Để chỉ định nhiều lớp, hãy tách tên lớp bằng một không gian, ví dụ:.Điều này cho phép bạn kết hợp một số lớp CSS cho một phần tử HTML.separate the class names with a space, e.g. . This allows you to combine several CSS classes for one HTML element.