Добавление правил 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?
4 ответа
Это работает у меня в 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) для установки содержимого тега стиля вызовет исключение, поскольку они устанавливают свойство DOM innerHTML , которое доступно только для чтения.
Вот документация IE свойства innerHTML :
Свойство доступно для чтения и записи для всех объектов , кроме следующих, для {{1} } который доступен только для чтения: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Для динамической загрузки файла CSS с помощью JQuery.
var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: <your CSS file url>
});
$("head").append( link );
Попробуйте функцию css в jQuery:
$( 'body' ).css( { margin: 0 } )
Лично я бы сделал это.
var styles = {
margin: '0',
padding: '5px',
border: 'solid 0px black'
}
$('body').css(styles);