Добавление правил CSS с текстовым методом к элементу стиля не работает в IE - PullRequest
Новая
       0

Добавление правил CSS с текстовым методом к элементу стиля не работает в IE

25 голосов
/ 22 апреля 2010

Отлично работает в 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?

Ответы [ 6 ]

52 голосов
/ 22 апреля 2010

Это работает для меня в 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.

5 голосов
/ 22 апреля 2010

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

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

$('body').css(styles);
3 голосов
/ 03 августа 2011

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

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

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

2 голосов
/ 22 апреля 2010

Для динамической загрузки файла CSS с использованием JQuery. 

var link = $("<link>");
link.attr({
    type: 'text/css',
    rel: 'stylesheet',
    href: <your CSS file url>
});
$("head").append( link );
1 голос
/ 22 августа 2011

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

0 голосов
/ 22 апреля 2010

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

$( 'body' ).css( { margin: 0 } )
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...