Добавление CSS-правил с помощью текстового метода в элемент стиля не работает в IE

Он отлично работает в Firefox и Chrome, но не работает в IE8. Вот структура html:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
   $(function() {
    // this does not work in IE
    $('<style type="text/css"></style>').text('body {margin: 0;}').appendTo('head');
   });
  </script>
 </head>
 <body>
 </body>
</html>

И что альтернатива для этого в IE?

Ответ 1

Это работает для меня в IE7:

$('<style type="text/css">body {margin: 0;}</style>').appendTo($('head'));

Другой синтаксис, который может быть проще читать:

$('head').append('<style type="text/css">body {margin:0;}</style>');

Однако вызов .text(val) или .html(val) для установки содержимого тега style вызовет исключение, потому что они устанавливают свойство innerHTML DOM, доступное только для чтения.

Вот документация IE свойства innerHTML:

Свойство читается/записывается для всех объектов, за исключением следующих, для который доступен только для чтения: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Ответ 2

Лично я бы сделал это.

var styles = {
  margin: '0',
  padding: '5px',
  border: 'solid 0px black'
}

$('body').css(styles);

Ответ 3

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

$('head').append('<style>' + content + '</style>');

тогда ваш код будет работать почти во всех браузерах, здесь "контент" - это переменная, которую вы определяете извне, и она будет содержать данные, которые вы хотите вставить в теги <style>. это, безусловно, будет работать.

Ответ 4

Чтобы динамически загружать файл CSS с помощью JQuery.

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

Ответ 5

попробуйте: $('<div/>').load("style.css",function(style){ $(data.appendTo).append('<style type="text/css">' + style + '</style>'); });

Ответ 6

Попробуйте функцию css в jQuery:

$( 'body' ).css( { margin: 0 } )