Làm cách nào để tải các quy tắc css động trong Webkit (Safari/Chrome)?

Question

Tôi hiện đang gặp sự cố trong Webkit (Safari và Chrome) là tôi cố tải động (innerHTML) một số html vào div, html chứa quy tắc css (...), sau khi html được hiển thị định nghĩa kiểu không được tải (Vì vậy, trực quan tôi có thể nói cho các phong cách không có và cũng có thể nếu tôi tìm kiếm với javascript cho họ không có phong cách được tìm thấy). Tôi đã thử sử dụng một plugin jquery tocssRule(), nó hoạt động nhưng nó chỉ là quá chậm. Có cách nào khác để tải webkit để tải các kiểu động không? Cảm ơn. Patrick

Answer 1

Tôi nghĩ thực tiễn tốt hơn là gắn thẻ "liên kết" vào phần đầu tài liệu của bạn. Nếu không thể, hãy thử thêm một thẻ "kiểu" vào đầu. Thẻ kiểu không được ở trong phần thân (thậm chí không xác thực).

Nối liên kết thẻ:

var link = document.createElement('link'); 

link.setAttribute('rel', 'stylesheet'); 

link.type = 'text/css'; 

link.href = 'http://example.com/stylesheet.css'; 

document.head.appendChild(link); 

phong cách Nối tag:

var style = document.createElement('style'); 

style.innerHTML = 'body { background-color: #F00; }'; 

document.head.appendChild(style); 

Answer 2

Cảm ơn Vatos, bạn đã cho tôi một dẫn tốt, về cơ bản tôi đã làm những gì bạn đề nghị nhưng sử dụng jquery để thiết lập html và nối thêm kiểu mới vào đầu, vì safari/chrome sẽ dừng khi thực hiện innerHTML và document.head không được xác định. Mã của tôi đã kết thúc giống như thế này

var cssDefinitions = '..my style chunk goes here'; 
var style = document.createElement('style');' 
$(style).html(cssDefinitions); 
$('head').append(style);

Answer 3

Đây là biểu diễn. Những gì Patrick nói không làm việc cho tôi. Đây là cách tôi đã làm nó.

var ref = document.createElement('style'); 
ref.setAttribute("rel", "stylesheet"); 
ref.setAttribute("type", "text/css"); 
document.getElementsByTagName("head")[0].appendChild(ref); 
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie 
else ref.appendChild(document.createTextNode(asd)); 

InnerHTML không được dùng nữa và không được sử dụng cho những thứ như vậy. Hơn nữa nó cũng chậm hơn.

Answer 4

Cách đơn giản nhất (sử dụng jQuery đó là) như sau:

var cssLink = $('<link />'); 
cssLink.attr("rel","stylesheet") 
cssLink.attr("type", "text/css"); 
cssLink.attr("href","url/to.css"); 

Nếu bạn làm điều đó theo cách đó thì nó sẽ làm việc trong Safari. Nếu bạn làm điều đó theo cách bình thường jQuery (tất cả trong một chuỗi văn bản) nó sẽ thất bại (css sẽ không tải).

Sau đó, bạn chỉ cần nối nó vào đầu bằng $ ('head'). Append (cssLink);

Answer 5

Straight-up jQuery chiều (hoạt động trên các trình duyệt chính - bao gồm cả Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

Từ trang web:

$("head").append("<link />"); 
var CSS = $("head").children(":last"); 
CSS.attr({ 
"rel": "stylesheet", 
"type": "text/css", 
"href": "url/to.css" 
}); 

Lưu ý: ví dụ cũng bao gồm tiêm JS, có thể được bỏ qua nếu bạn chỉ muốn tiêm tham chiếu CSS.

Answer 6

meh. Tôi không có đủ điểm để bỏ phiếu cho kết quả của Andrei Cimpoca, nhưng giải pháp đó là giải pháp tốt nhất ở đây.

style.innerHTML = "..."; không hoạt động trong các công cụ webkit hoặc tức là.

Để tiêm đúng văn bản css, bạn phải:

style.styleSheet.cssText = "..."; cho ví dụ.

và

style.appendChild (tài liệu.createTextNode ("...")); cho webkit.

Firefox cũng sẽ hoạt động với tùy chọn thứ hai hoặc với style.innerHTML = "...";

Answer 7

Bên cạnh các phiên bản phong cách thẻ dựa trên, bạn cũng có thể thêm phong cách sử dụng javascript trực tiếp:

var style = document.getElementById('some-style-tag'); 
var sheet = style.sheet; 
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length); 

này có lợi thế của việc có thể sử dụng các biến mà không cần phải dùng đến cssText/innerHTML.

Hãy nhớ rằng trên các trình duyệt dựa trên webkit, điều này có thể chậm nếu bạn đang chèn nhiều quy tắc. Đã xảy ra lỗi khi khắc phục sự cố hiệu suất này trong webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Cho đến lúc đó, bạn có thể sử dụng thẻ kiểu để chèn hàng loạt.

Đây là cách tiêu chuẩn W3C chèn quy tắc phong cách, nhưng nó không được hỗ trợ bởi bất kỳ phiên bản của IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 8

Tôi biết đó là một chủ đề cũ hơn, nhưng nghĩ ai đó sẽ được hưởng lợi. Tôi quá cần thiết để tải css động vào trang web của tôi (trước khi tất cả mọi thứ render onload, theo bao gồm mẫu "thành phần"):

var oStyle = $("<style />"); 

oStyle.append("@import url(" + sTemplateCssUrl + ");"); 
oStyle.attr("type", "text/css"); 

$(document.head).append(oStyle); 

Tôi đã cố gắng phụ thêm để document.head với một cách tiếp cận một dòng - làm việc trong IE 10 và Chrome, nhưng không phải trong Safari. Cách tiếp cận ở trên hoạt động trong tất cả 3.