Как добавить стили в IE8?

Question

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

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

Как вы можете сказать, это не работает в IE8!

Как я могу заставить его работать в IE8?

Произойдет ошибка: «неожиданный вызов метода или доступа к свойству», поскольку IE8 не распознает HTML как действительный (abc часть)

Answer 1

В MSIE установите свойство cssText объекта styleSheet, связанного с элементом <style/>:

   $('<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/

Подробнее: http://msdn.microsoft.com/en-us/library/ie/ms533698%28v=vs.85%29.aspx

Answer 2

Я согласен с jmort253, что, возможно, лучше напрямую изменить атрибуты стиля или загрузить файл CSS. Затем вы можете использовать более эффективные методы addClass и removeClass. При этом элементы стиля должны быть в голове (они, конечно, работают в теле, но не officially, насколько я помню). Таким образом, вы можете сделать что-то подобное для этой цели.

http://jsfiddle.net/TCUxx/1

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

Обновлено - по какой-то причине это не работает. Я не знаю почему. Работает в IE9.

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

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

Answer 3

Работает ли это:

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

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

Или

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

Answer 4

Вы используете jQuery, а jQuery имеет огромную библиотеку методов для динамического изменения стиля элементов:

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

$(selector).propertyName(value);

Выше приведены только два примера использования jQuery для воздействия на стиль элемента.или группа элементов, идентифицированных селектором.

Таким образом, чтобы изменить цвет элемента с id = "abc", будет работать следующее:

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

Дополнительно, если вы 'Рассматривая тему элемента или группы элементов, вы можете создать файл style.css, описывающий стили для различных имен классов.Затем вы можете просто применить стиль, добавив или удалив className к элементу (ам) следующим образом:

style.css:

.custom_persona {
    color:#000000;
}

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

Сценарий index.html:

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

// OR

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

jQuery CSS-категория методов и свойств более подробно описывает доступные свойства.Это не только решит проблему IE8, но и будет работать во всех других основных браузерах.