It works fine in Firefox and Chrome, but does not work in IE8. Here is the html structure:
<!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>
And what' s the alternative to do this in IE?
This is working for me in IE7:
$('<style type="text/css">body {margin: 0;}</style>').appendTo($('head'));
Another syntax which might be easier to read:
$('head').append('<style type="text/css">body {margin:0;}</style>');
However, calling either .text(val)
or .html(val)
to set the contents of the style
tag will cause an exception to be thrown because they set the innerHTML
DOM property which is read-only.
Here is IE's documentation of the innerHTML
property:
The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With