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
và
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.