Thay đổi hoặc hoán đổi CSS của nhiều thành phần HTML cùng một lúc

Tôi có khoảng 100 <span class="foo">, 100 <span class="bar"> và 100 <span class="baz"> thẻ trong tài liệu của mình. Tôi cần triển khai các hoạt động sau trong JavaScript:Thay đổi hoặc hoán đổi CSS của nhiều thành phần HTML cùng một lúc

Thay đổi nền cho tất cả các màu đỏ thành đỏ, tất cả các thanh thành màu xanh lá cây, tất cả các màu xanh lam.
Thay đổi nền cho tất cả các hình nền thành màu xanh lá cây, tất cả các thanh thành màu xanh dương, tất cả các màu đều chuyển thành màu đỏ.
Thay đổi nền cho tất cả các hình nền thành màu xanh lam, tất cả các thanh thành màu đỏ, tất cả đều có màu xanh lá cây.

Tôi sẽ gọi các hoạt động này khoảng 1000 lần, vì vậy tôi muốn tránh một giải pháp gắn thẻ <style> vào <head> mỗi khi tôi thực hiện một thao tác.

Có điều gì đơn giản hơn hoặc nhanh hơn hoặc tốt hơn lặp lại trên tất cả các yếu tố <span> với document.getElementsByTagName('span') và thay đổi hoặc gắn thêm thuộc tính DOM .className cho từng phần tử không?

Nguồn

2010-02-21 kat

Cách đơn giản nhất là sử dụng CSS để thực hiện việc này, thay vì thay đổi tên lớp phần tử. Hãy xem xét đánh dấu và CSS sau đây.

.normal .foo{ 
    background-color: #0f0; 
} 
.alternate .foo { 
    background-color: #f00; 
} 

<body class="normal"> 
    <span class="foo">hello</span> 
    <span class="bar">hello</span> 
    <span class="baz">hello</span> 
</body>

Bạn có thể chỉ cần sử dụng javascript để thay đổi tên lớp trên cơ thể từ bình thường sang thay thế, để thực hiện thay đổi màu trên phần tử .foo. Các quy tắc khác sẽ đặt màu cho thanh và baz.

document.getElementsByTagName('body')[0].className = 'alternate';

Nguồn

2010-02-21 15:10:53

Bạn có thể cung cấp cho cơ thể tài liệu của bạn một lớp để xác định cấu hình màu nào sẽ được sử dụng và sau đó chỉ cần tạo kiểu cho các nhịp theo.

ví dụ:

.configTypeOne span.foo{...} 
.configTypeTwo span.foo{...}

Nếu bạn đang sau đó thay đổi phong cách trên cùng một trang sau một khoảng thời gian, một mảnh nhỏ của JS để thay đổi lớp của cơ thể sẽ được tất cả những gì cần thiết.

Nguồn

2010-02-21 15:08:21

Thay đổi hoặc hoán đổi CSS của nhiều thành phần HTML cùng một lúc

Trả lời

Các vấn đề liên quan