Làm cách nào để phân tích cú pháp @import stylesheets bằng Javascript

Question

Tôi đang cố gắng đọc bộ chọn CSS trong bảng định kiểu của tôi với mảng document.styleSheets. Nó hoạt động tốt với các thẻ <link> và <style>, nhưng khi tôi sử dụng @import bên trong một <style> nó không hiển thị trong mảng - chỉ như một cssRule (kiểu là "Không xác định" trong Safari 3 và FF 3).

Vì vậy: Làm cách nào để phân tích cú pháp css trong tệp @imported?

Answer 1

Giả sử rằng tài liệu của chúng tôi chứa một @ nhập quy tắc như quy tắc đầu tiên trong stylesheet đầu tiên, đây là đoạn code cho các tiêu chuẩn trình duyệt tương thích

document.styleSheets[0].cssRules[0].styleSheet.cssRules; 

và trường hợp đặc biệt cho tất cả-yêu IE của chúng tôi

document.styleSheets[0].imports[0].rules; 

Bạn có thể dễ dàng tìm ra điều này nếu bạn đã đọc the page at quirksmode.org mà tôi đã liên kết và sau đó đi các thuộc tính của @import -rule với vòng lặp for..in - đó là những gì tôi đã làm .. .

PS

: tôi không thể bình luận về câu trả lời khác, nhưng nếu tôi có thể, tôi sẽ chế nhạo bạn đúng cách;)

Answer 2

Kiểm tra trang này - trong đó tiếp tục liên kết với trang này trên quirksmode .org.

Cảm ơn, nhưng tôi đã thử rằng ... các ví dụ Quirksmode không bao giờ phân tích cú pháp bảng định kiểu được nhúng với @import.

Nếu tôi có HTML này/CSS:

<link rel="stylesheet" type="text/css" href="css/test1.css" /> 

<style type="text/css"> 

    @import url('css/test2.css'); 

    div { 
     color: blue; 
    } 

</style> 

... sau đó document.styleSheets.length là 2 (thẻ liên kết và thẻ phong cách). Tệp CSS được liên kết thông qua @import sẽ có sẵn dưới dạng

document.styleSheets[1].cssRules[0]. 

Nói cách khác, quy tắc CSS. Bạn cũng có thể xem trang này tại trang Quirksmode mà bạn đã đề cập, Christoph. Tôi có thể lấy cssText của nó ("@import url ('css/test2.css');") nhưng tôi không thể tìm ra cách phân tích CSS bên trong tệp (test2.css) ...

Nếu tôi đã hoàn toàn bị mất một cái gì đó rõ ràng ở đây, cảm thấy tự do để chế giễu tôi ... :)

Answer 3

trang tuyệt vời với rất nhiều kiểu phân tích thông tin: http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets