Làm cách nào để chèn kiểu vào IE8?

Question

// create a style element 
$("#main").html('<style id="custom_persona_css"></style>'); 

$("#custom_persona_css").append('#abc{ color:#000000; }'); 

Như bạn có thể nói, điều này không hoạt động trong IE8!

Tôi làm cách nào để nó hoạt động trong IE8?

Sẽ có một lỗi: 'cuộc gọi bất ngờ với phương pháp hay tài sản truy cập' vì IE8 không nhận ra html là hợp lệ (abc phần)

Answer 1

Trong MSIE thiết lập cssText-tài sản của stylesheet đối tượng liên quan đến <style/> -element:

$('<style id="custom_persona_css"></style>').appendTo('head'); 

    if($.browser.msie) 
    { 
    $("#custom_persona_css").prop('styleSheet').cssText='#abc{ color:#000000; }'; 
    } 
    else 
    { 
    $("#custom_persona_css").append('#abc{ color:#000000; }'); 
    } 

http://jsfiddle.net/doktormolle/BLJUv/

Thông tin khác: http://msdn.microsoft.com/en-us/library/ie/ms533698%28v=vs.85%29.aspx

Answer 2

Bạn đang sử dụng jQuery, và jQuery có một thư viện khổng lồ của các phương pháp để thay đổi động kiểu dáng của các phần tử:

$(selector).css(propertyName, value); 

$(selector).propertyName(value); 

Trên đây chỉ là hai ví dụ về cách sử dụng jQuery để ảnh hưởng đến kiểu phần tử hoặc nhóm phần tử được xác định bởi bộ chọn.

Vì vậy, để thay đổi màu sắc của phần tử với id = "abc", sau đây sẽ làm việc:

$('#abc').css('color','#000000'); 

Ngoài ra, nếu bạn đang tìm kiếm để chủ đề một yếu tố hoặc nhóm của các yếu tố, bạn có thể tạo một tệp style.css phác thảo các kiểu cho các lớp khác nhau. Sau đó, bạn chỉ có thể áp dụng các phong cách bằng cách thêm hoặc loại bỏ các className đến các yếu tố (s) như sau:

style.css:

.custom_persona { 
    color:#000000; 
} 

.some_other_custom_style { 
    color:red; 
    background-color: #fff; 
} 

index.html kịch bản:

$('#abc').addClass('custom_persona'); 

// OR 

$('#abc').addClass('.some_other_custom_style'); 
$('#abc').removeClass('custom_persona'); 

jQuery CSS category of methods and properties đi vào chi tiết hơn về những thuộc tính có sẵn. Điều này không chỉ giải quyết vấn đề IE8 của bạn, nhưng điều này cũng sẽ làm việc trong tất cả các trình duyệt chính khác.

Answer 3

Tôi đồng ý với jmort253 rằng có lẽ trực tiếp sửa đổi thuộc tính kiểu hoặc tải tệp css là tốt nhất. Sau đó, bạn có thể sử dụng các phương thức addClass và removeClass hiệu quả hơn. Điều đó đang được nói, các yếu tố phong cách nên được trong đầu (họ làm việc trong cơ thể tất nhiên, nhưng không phải là officially hỗ trợ như tôi nhớ lại). Vì vậy, bạn có thể làm một cái gì đó như thế này cho mục đích đó.

http://jsfiddle.net/TCUxx/1

$('head').append('<style type="text/css">#abc{ color:#ff0000; }</style>'); 

Cập nhật - vì lý do này không hoạt động. Tôi không biết tại sao. Hoạt động trong IE9.

var $styleElement = $('<style />', { 
    type: 'text/css', 
    text: '#abc{ color:#ff0000; }' 
}); 

$('head').append($styleElement); 

Answer 4

Liệu công việc này:

var $style = $("#custom_persona_css"); 

$style.html(
    $style.html() + '#abc{ color:#000000; }' 
); 

Hoặc

$("#custom_persona_css")[0].innerHTML += '#abc{ color:#000000; }'