2011-05-21 17 views
13

Hola chicos,Cómo agregar hojas de estilo en IE usando jQuery?

Yo sólo estaba tratando de crear un plugin, y necesitaba que sea fácil de usar, así que quiero append la etiqueta <link/> en la parte head de la página a los usuarios como mi plugin es cargado . Funciona bien con todos los otros navegadores (no estoy seguro de IE9, IE7 & IE6) pero no funciona para IE8. No sé lo que está mal con mi complemento, ¡así que acabo de crear una página de muestra y enfrenté el problema similar! Aquí está mi página de prueba HTML + Código jQuery ------

<html> 
     <head> 
       <script src="../jquery-1.6.min.js"></script> 
       <script> 
         $(document).ready(function() { 
          $(document.head).append('<link rel="stylesheet" type="text/css" href="style.css" />'); 
         }); 
       </script> 
     </head> 
     <body> 
       <h1>Text!</h1> 
     </body> 
</html> 

Y aquí es mi código CSS -----

body { 
background:#ddd; 
} 
h1 { 
color: #789; 
} 

Así que ¿alguien puede decirme dónde voy mal o es este el problema de la vida?

gracias de antemano


después de ver el primer comentario y va a LINK suministrado, acabo de crear este código de ejemplo y encontré algo increíble! Ver este ~~~

<html> 
     <head> 
       <script src="../jquery-1.6.min.js"></script> 
       <script> 
         $(document).ready(function() { 
          if (document.getElementsByTagName('head')[0] === document.head) { 
          $("head").append('<link rel="stylesheet" type="text/css" href="style.css" />'); 
          }else { 
          alert('This doesn\'t supports head appending!'); 
          } 
         }); 
       </script> 
     </head> 
     <body> 
       <h1>Text!</h1> 
     </body> 
</html> 

Al ejecutar esta persona con mi navegador IE8 me sale el mensaje de que

This doesn't supports head appending! 

Bueno, yo no lo que está mal con mi navegador o se trata de la falta de IE8 ?


+0

Dupe de: http://stackoverflow.com/questions/1184950/dynamically-loading-css-stylesheet-doesnt-work-on-ie –

Respuesta

27
if (document.createStyleSheet) 
{ 
    document.createStyleSheet("style.css"); 
} 
else 
{ 
    $("head") 
     .append('<link rel="stylesheet" type="text/css" href="style.css" />'); 
} 
+0

Gracias amigo rock ~ esto funciona con todos los navegadores del mundo! ¡Gracias de nuevo! –

+5

Esto parece algo que debería ser una parte de jquery al intentar agregar HTML que incluye una etiqueta de enlace en IE <9. –

+0

Acepto, esto debería ser parte de jquery. – FiveTools

5

Usted está usando document.head para acceder a la cabeza. document.head es solo una adición reciente al DOM, como parte de HTML5. Por lo tanto, no es universalmente compatible.

Si desea utilizarla, usted debe add a shim antes de llamar a:

document.head = document.head || document.getElementsByTagName('head')[0]; 

De lo contrario, sólo puede añadir directamente a la <head> etiqueta (que se recomienda, ya que es la mitad del punto de usar jQuery del sintáctica azúcar):

$("head").append(...); 
+0

I kno w pero no está funcionando, vea mi más reciente edición para mi pregunta. IE8 no admite etiquetas anexas en la sección 'head' !? –

+0

... su alerta simplemente prueba que document.head no es compatible, como dije, no es que no se pueda agregar al encabezado a través de JavaScript. Si agrega la cuña, debería funcionar. 'document.getElementsByTagName ('head') [0]' tiene soporte universal. – Yahel

+0

¿Entonces cómo agregar la etiqueta 'link' en él? Por favor, ayúdame. –

Cuestiones relacionadas