Tải CSS bên ngoài cho một DIV cụ thể

Question

Vì vậy, về cơ bản tôi có một trang có CSS ​​riêng của nó. Trên máy chủ của tôi, tôi có một thư mục của các tệp CSS phong cách khác nhau, vì vậy tôi muốn có một cửa sổ "xem trước" trên trang của tôi cho chúng. Tôi có thể bằng cách nào đó, có thể sử dụng javascript, áp dụng một tệp CSS bên ngoài chỉ cho một DIV nhất định, không phải toàn bộ trang để tôi có thể nhận được "bản xem trước" của tệp CSS tùy chỉnh? Tôi không muốn sử dụng iframe.

Answer 1

CSS áp dụng cho toàn bộ tài liệu.

Nếu bạn muốn giới hạn phạm vi, thì bạn cần tận dụng bộ chọn con cháu.

ví dụ: #id_of_div .the .rest .of .the .selector {}

Bạn cần phải áp dụng điều này cho tất cả các bộ chọn, và đưa vào tài khoản groups (vì vậy nó không phải là đơn giản như chỉ tiền tố toàn bộ stylesheet và suffixing mỗi })

Bạn cũng sẽ tìm thấy các stylesheet cho tài liệu chính áp dụng cho bản xem trước của bạn.

Khung có thể là phương pháp tốt nhất để giải quyết vấn đề này.

Answer 2

Bạn có thể sử dụng khung nội tuyến để tải trang xem trước hoặc tự động tải CSS vào trang. Nhưng, nếu bạn muốn các kiểu chỉ bằng cách áp dụng cho div, bạn phải thêm tiền tố cho bộ chọn CSS của bạn với id của div. #div-id #element-inside-div { }.

Các kịch bản cho tải nó trong có thể trông như thế này:

var cssFile = document.createElement("link"); 
cssFile.rel = "stylesheet"; 
cssFile.type = "text/css"; 
cssFIle.href = "file.css"; 
document.getElementsByTagName("head")[0].appendChild(cssFile); 

Answer 3

Giống như Quentin nói, bạn có thể sử dụng selector hậu duệ để giới hạn phạm vi. Một cái gì đó như less có thể giúp rất nhiều. Ví dụ, tôi muốn có "bootstrap.css" chỉ áp dụng cho #MyDiv, trong "my.less":

#MyDiv { 
    @import "bootstrap.less"; 
} 

"bootstrap.css" nên được đổi tên (hoặc liên kết) đến "bootstrap.less ". Chạy:

lessc my.less my.css 

sẽ thêm #MyDiv vào mọi bộ chọn trong tệp được nhập.

Answer 4

Đối với một trong các dự án của tôi, tôi cần chính xác điều tương tự, nhưng cũng được hỗ trợ trong phiên bản CSS 2.
Sau một tìm kiếm dài trên web, tôi không thấy bất kỳ điều gì hữu ích, vì vậy tôi quyết định đã tạo ra chức năng này bằng cách sử dụng JavaScript có thể thực sự có thể áp dụng toàn bộ css cho một phần tử cụ thể trong DOM.

Chỉ cần gọi hàm applyCSSFileToElement, như mô tả dưới đây (phụ thuộc vào thư viện jQuery):

function renderCSSForSelector(css, selector) { 
    return ((css+"")||"").replace(/\n|\t/g, " ") 
     .replace(/\s+/g, " ") 
     .replace(/\s*\/\*.*?\*\/\s*/g, " ") 
     .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) { 
     var collector = [], parts = $2.split(","); 
     for (var i in parts) { 
      collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, "")); 
     } 
     return $1 + " " + collector.join(", ") + " " + $3; 
    }); 
} 

function applyCSSToElement(css, elementSelector) { 
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>"); 
} 

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) { 
    callbackSuccess = callbackSuccess || function(){}; 
    callbackError = callbackError || function(){}; 
    $.ajax({ 
     url: cssUrl, 
     dataType: "text/css", 
     success: function(data) { 
      applyCSSToElement(data, elementSelector); 
      callbackSuccess(); 
     }, 
     error: function(jqXHR) { 
      callbackError(); 
     } 
    }) 
} 

Chức năng giải thích:

• renderCSSForSelector - Trên thực tế prepends một chọn cho mỗi định nghĩa phong cách.
• áp dụngCSSToElement - Lấy dữ liệu nguồn CSS, áp dụng hàm renderCSSForSelector và đưa nó vào thẻ HEAD.
• applyCSSFileToElement - Áp dụng một file CSS (cssUrl) vào một khu vực cụ thể (elementSelector) trong DOM. callbackSuccess được gọi khi tệp được tải thành công và CSS đã được áp dụng. Số gọi lại callbackError được gọi khi có lỗi khi tải tệp CSS.

Chúc may mắn!