web-dev-qa-db-fra.com

L'ajout de règles css avec la méthode text IE

Cela fonctionne bien dans Firefox et Chrome, mais ne fonctionne pas dans IE8. Voici la structure 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>

Et quelle est l'alternative de le faire dans IE?

jqueryinternet-explorer
23
powerboy

Cela fonctionne pour moi dans IE7:

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

Une autre syntaxe qui pourrait être plus facile à lire:

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

Toutefois, si vous appelez .text(val) ou .html(val) pour définir le contenu de la balise style, une exception sera levée, car ils définissent la propriété DOM innerHTML qui est en lecture seule.

Voici la documentation d'IE de la propriété innerHTML:

La propriété est en lecture/écriture pour tous les objets , À l’exception du suivant, pour Pour lequel elle est en lecture seule: COL, COLGROUP, . FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

49
Ken Browning

Personnellement je le ferais. 

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

$('body').css(styles);
5
James Westgate

J'avais le même problème avec un plug-in de dépendance pour jQuery, utilisez simplement ce code: 

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

alors votre code fonctionnera dans presque tous les navigateurs, ici "contenu" est une variable que vous définissez en externe et qui contiendra les données que vous souhaitez insérer dans les balises <style>. cela fonctionnera certainement.

3
Pawan Choudhary

Pour charger dynamiquement un fichier CSS à l'aide de JQuery.

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

essayez: $('<div/>').load("style.css",function(style){ $(data.appendTo).append('<style type="text/css">' + style + '</style>'); });

1
Leon Gurbanov

Essayez la fonction css dans jQuery:

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