Cómo reemplazar todo el CSS de una página después de una petición Ajax con jQuery?

StackOverflow https://stackoverflow.com/questions/2146594

  •  23-09-2019
  •  | 
  •  

Pregunta

Tengo un documento con una CSS vinculada en. ¿Cómo puedo reemplazar el CSS actual con uno procedente de un documento que acabo con descabellada petición AJAX usando jQuery?

Este es el código que estoy tratando en este momento, pero sin éxito hasta el momento: 

$(function() {
    $.get('next_page.html', function(data, textStatus) {
        $('link[rel=stylesheet]:first')
            .attr('href', $(data).find('link[rel=stylesheet]:first').attr('href'));
    });
});
  

Actualización: $ .find () no funciona en cualquier navegador (probado Firefox 3.5,   Chrome y Safari 3 en Mac), pero   $ .Filter () encontrado solamente la hoja de estilo   en Firefox 3.5 - todavía no hay nada en   Chrome y Safari 3.

Debe ser simple normal, ¿verdad? - sustituir el href CSS actual por uno nuevo, y listo

Por alguna razón, jQuery no encuentra nada dentro de la etiqueta <head> que viene de petición AJAX. Por otra parte, incluso jQuery no puede encontrar toda la <head> sí mismo de los datos de AJAX. En otras palabras, $(data).find('head').size() dentro de la función de devolución de llamada devuelve 0.

Estoy usando jQuery 1.4.

Actualización 10 de Feb de 2010:. Yo presenté un error de esto con jQuery y estuvieron de acuerdo que no es posible encontrar cualquier cosa de la etiqueta <head> de un conjunto de datos ajax Aquí está la respuesta que obtuve:

  

http://dev.jquery.com/ticket/6061#comment:1 - "Sí, eso es correcto - el análisis sintáctico   HTML puro que sólo garantizamos la   contenido del elemento del cuerpo. Si tu   deseen acceder al XML de la página   directamente a continuación, le recomiendo que se   explícitamente que el archivo o .xhtml   solicitarlo como XML, por ejemplo: "

¿Fue útil?

Solución 3

Esto es válido según equipo de desarrollo de jQuery - "análisis de HTML recta que sólo garantizamos el contenido del elemento del cuerpo Si desea acceder al XML de la página directamente a continuación, le recomiendo que explícitamente hace la .xhtml archivo o petición. como XML, por ejemplo: "

$.ajax({ dataType: "xml", file: "some.html", success: function(data){ ... });

Otros consejos

Esta jQuery debe hacerlo: 

  $(document).ready(function() {
        $.get("next_page.html", function(data) {
            $("link[rel='stylesheet']").attr("href", $(data).filter("link[rel='stylesheet']").attr("href"));
        });
    });

Prueba esto: 

$.load('next_page.html', function(data) {
    $('link[rel=stylesheet]:first').replaceWith($(data).find('link[rel=stylesheet]:first'));
});

No estabas haciendo realmente una llamada AJAX en su propio ejemplo, quizás que era el problema o simplemente se olvidó de agregar la parte .load? Esto debería funcionar bien, dado que es el interior del bloque $(document).ready(function() { ... });.

Tengo que trabajar en mi sitio. Simplemente añadí un id a mi etiqueta de enlace donde se carga mi css. y luego cambia el attri href (lo tienes esa parte derecha).

HTML: 

<link type="text/css" href="/llt_style/skin/nuit.css" rel="stylesheet" id="llt_skin_href"/>

Y el yo uso una selección para permitir al usuario elegir su piel. 

<select onchange="$('#llt_skin_href').attr('href', $(this).val());">
    <option value="/llt_style/skin/jour.css">Jour</option>
    <option value="/llt_style/skin/nuit.css">Nuit</option>
</select>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top