Tôi đang cố gắng thêm động quy tắc biểu định kiểu css bằng javascript, chẳng hạn như ví dụ 2 here.Khi nào biểu định kiểu được thêm vào document.styleSheets
Nó hoạt động hầu hết thời gian, nhưng có vẻ như là một điều kiện chủng tộc khiến đôi khi gặp lỗi trong (ít nhất) Chrome (15.0.874 và 17.0.933). Nó xảy ra không thường xuyên khi bộ nhớ cache trống (hoặc đã bị xóa).
Đây là những gì tôi đã có thể thu hẹp xuống. Trước tiên, tôi tải biểu định kiểu bên ngoài bằng cách gắn nó vào <head> và sau đó tôi tạo biểu định kiểu mới (nơi tôi sẽ thêm quy tắc). Sau đó tôi in chiều dài document.styleSheets (ngay lập tức và sau 1 giây).
$(function() {
// it doesn't happen if this line is missing.
$("head").append('<link rel="stylesheet" type="text/css"'+
'href="/css/normalize.css" />');
var stylesheet = document.createElement("style");
stylesheet.setAttribute("type", "text/css");
document.getElementsByTagName('head')[0].appendChild(stylesheet);
var b = $('body');
b.append(document.styleSheets.length).append('<br/>');
setTimeout(function() {
b.append(document.styleSheets.length).append('<br/>');
}, 1000);
});
(chơi với nó ở http://jsfiddle.net/amirshim/gAYzY/13/)
Khi bộ nhớ cache là rõ ràng, đôi khi nó in 2 sau đó 4 (jsfiddle thêm nó là của riêng 2 file css), có nghĩa là nó không thêm một trong hai phong cách trang tính đến document.styleSheets ngay lập tức ... nhưng có thể chờ tệp bên ngoài tải.
Điều này có được mong đợi không?
Nếu vậy, là Example 2 on MDN (và nhiều người khác ở ngoài đó) bị hỏng? Kể từ dòng 27:
var s = document.styleSheets[document.styleSheets.length - 1];
có thể đánh giá với document.styleSheets.length == 0
Lưu ý rằng điều này không xảy ra khi tôi không tải file CSS bên ngoài đầu tiên.
Tôi muốn hỏi bạn kết quả mong muốn của bạn là gì. Trong những trường hợp nào bạn sẽ muốn 'tiêm' một quy tắc vào một tập tin css so với chỉ có nó được viết bên trong tập tin css nơi đầu tiên? – Sotkra
Tôi cũng đang thêm biểu định kiểu động ... nhưng chỉ sau $ (tài liệu) đã được kích hoạt ... –
@Kees: Mã tôi đã cung cấp đang làm mọi thứ trong '$ (tài liệu) .ready'. Đó là những gì '$ (function() {...}); – Amir