Cargue un CSS externo para un DIV específico

Question

Así que, básicamente, tengo una página que tiene su propio CSS. En mi servidor tengo una carpeta de diferentes archivos de estilo CSS, por lo que quiero tener una ventana de "vista previa" en mi página para ellos. ¿Puedo de alguna manera, tal vez usando javascript, aplicar un archivo CSS externo solo a un DIV determinado, no a toda la página para que pueda obtener una "vista previa" del archivo CSS personalizado? Prefiero no usar iframes.

Answer 1

CSS se aplica a documentos completos.

Si desea limitar el alcance, entonces necesita hacer uso de un selector descendente.

p. Ej. #id_of_div .the .rest .of .the .selector {}

usted tiene que aplicar esto a cada selector, y tener en cuenta groups (lo que no es tan simple como prefijo toda la hoja de estilo y cada sufijo })

También se encontraría la hoja de estilo para el documento principal que se aplica a su vista previa.

Un marco probablemente sería el mejor enfoque para resolver este problema.

Answer 2

Puede usar un iframe para cargar la página de vista previa o cargar dinámicamente el CSS en la página. Pero, si desea que los estilos solo se apliquen al div, debe ponerle un prefijo a los selectores de CSS con el id del div. #div-id #element-inside-div { }.

El guión de cargarlo en que podría ser algo como esto:

var cssFile = document.createElement("link"); 
cssFile.rel = "stylesheet"; 
cssFile.type = "text/css"; 
cssFIle.href = "file.css"; 
document.getElementsByTagName("head")[0].appendChild(cssFile); 

Answer 3

Al igual que Quentin dijo, puede utilizar el selector descendiente limitar el alcance. Algo como less puede ayudar mucho. Por ejemplo, me gustaría tener "bootstrap.css" se aplica sólo a #MyDiv, en "my.less":

#MyDiv { 
    @import "bootstrap.less"; 
} 

"bootstrap.css" debe pasar a denominarse (o enlazados) a "bootstrap.less ". Run:

lessc my.less my.css 

añadiría #MyDiv a cada selectores en el archivo importado.

Answer 4

Para uno de mis proyectos, que necesitaba exactamente lo mismo, pero que se apoya también en la versión de CSS 2.
Después de una larga búsqueda por toda la web, no me encontró nada útil, por lo que decidieron creó esta funcionalidad usando JavaScript que realmente puede aplicar un css completo a un Elemento específico en DOM.

Sólo tiene que llamar la applyCSSFileToElement función, tal como se describe a continuación (dependido de la librería jQuery):

function renderCSSForSelector(css, selector) { 
    return ((css+"")||"").replace(/\n|\t/g, " ") 
     .replace(/\s+/g, " ") 
     .replace(/\s*\/\*.*?\*\/\s*/g, " ") 
     .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) { 
     var collector = [], parts = $2.split(","); 
     for (var i in parts) { 
      collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, "")); 
     } 
     return $1 + " " + collector.join(", ") + " " + $3; 
    }); 
} 

function applyCSSToElement(css, elementSelector) { 
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>"); 
} 

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) { 
    callbackSuccess = callbackSuccess || function(){}; 
    callbackError = callbackError || function(){}; 
    $.ajax({ 
     url: cssUrl, 
     dataType: "text/css", 
     success: function(data) { 
      applyCSSToElement(data, elementSelector); 
      callbackSuccess(); 
     }, 
     error: function(jqXHR) { 
      callbackError(); 
     } 
    }) 
} 

Funciones explicaciones:

• renderCSSForSelector - En realidad antepone un selector para cada definición de estilo.
• applyCSSToElement - Toma los datos de origen CSS, se aplica renderCSSForSelector y lo inyecta en la etiqueta HEAD.
• applyCSSFileToElement - Aplica un archivo CSS (cssUrl) en un área específica (elementSelector) en el DOM. Se llama al callbackSuccess cuando el archivo se carga correctamente y se aplica el CSS. Se llama al callbackError cuando hay un error al cargar el archivo CSS.

Buena suerte!