sửa đổi một đối tượng quy tắc css với javascript

Question

thể trùng lặp:
Changing a CSS rule-set from Javascript

tôi đã tự hỏi nếu có bất kỳ khả năng để thay đổi tờ khai Css stylesheet mà không đi cho kiểu nội tuyến.

Dưới đây là một ví dụ nhanh:

<style> 
    .box {color:green;} 
    .box:hover {color:blue;} 
</style> 

<div class="box">TEXT</div> 

Điều đó cho một hộp văn bản màu xanh chuyển sang màu xanh bằng văn bản trên di chuột.

Nếu tôi cho kiểu nội tuyến cho màu sắc, hành vi di chuột sẽ bị mất:

<div class="box" style="color:red;">TEXT</box> 

Điều đó cho một hộp văn bản màu đỏ, không có vấn đề gì.

Vì vậy, câu hỏi của tôi là, làm thế nào có thể truy cập và sửa đổi đối tượng khai báo css thay vì ghi đè kiểu với nội tuyến.

Cảm ơn,

Answer 1

Bạn có thể sử dụng cssRules trên đối tượng DOM stylesheet tương ứng với kiểu ban đầu của bạn để thay đổi quy tắc của bạn.

var sheet = document.styleSheets[0]; 
var rules = sheet.cssRules || sheet.rules; 

rules[0].style.color = 'red'; 

Lưu ý rằng IE sử dụng rules thay vì cssRules.

Dưới đây là một minh chứng: http://jsfiddle.net/8Mnsf/1/

Answer 2

Chỉ cần xác định lớp học của bạn và chỉ định/xóa lớp học thành các phần tử HTML bằng javascript.

Chỉ định kiểu trực tiếp cho một phần tử, có mức độ ưu tiên cao nhất, Nó sẽ ghi đè tất cả các quy tắc CSS khác.

EDIT:

bạn có thể muốn sử dụng tài sản cssText

xem ví dụ ở đây cssText property