navegadores - javascript descargar
Acceda al contenido del archivo CSS a través de JavaScript (6)
Con ese ejemplo específico (donde el CSS está en el mismo dominio que la página), puedes leer el archivo como texto a través de ajax :
$.ajax({
url: "/path/to/file.css",
dataType: "text",
success: function(cssText) {
// cssText will be a string containing the text of the file
}
});
Si desea acceder a la información de una manera más estructurada, document.styleSheets es una matriz de las hojas de estilo asociadas con el documento. Cada hoja de estilo tiene una propiedad llamada cssRules (o solo rules en algunos navegadores), que es una matriz del texto de cada regla en la hoja de estilo. Cada regla tiene una propiedad cssText . Así que puedes recorrer esos, por ejemplo:
$.each(document.styleSheets, function(sheetIndex, sheet) {
console.log("Looking at styleSheet[" + sheetIndex + "]:");
$.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
console.log("rule[" + ruleIndex + "]: " + rule.cssText);
});
});
Ejemplo en vivo : ese ejemplo tiene una hoja de estilo con dos reglas.
¿Es posible obtener todo el contenido de texto de un archivo CSS en un documento? F.ex:
<link rel="stylesheet" id="css" href="/path/to/file.css">
<script>
var cssFile = document.getElementById(''css'');
// get text contents of cssFile
</script>
No estoy realmente interesado en obtener todas las reglas de CSS a través de document.styleSheets, ¿hay alguna otra forma?
Actualización: Existe la opción ajax, por supuesto, agradezco las respuestas dadas. Pero parece bastante innecesario volver a cargar un archivo usando ajax que ya está cargado en el navegador. Entonces, si alguien conoce otra forma de extraer el contenido de texto de un archivo CSS actual (NO las reglas CSS), ¡publique!
Creo que lo mejor sería cargarlo con ajax con algo como:
$.get("/path/to/file.css", function(cssContent){
alert("My CSS = " + cssContent);
});
Lo más cerca que puede llegar a obtener la hoja de estilo sin utilizar ajax es, de hecho, iterar sobre todas las reglas CSS y concatenarlas en una cadena. Esto genera el archivo original con todos los comentarios y el exceso de espacios en blanco eliminados. Lo que tiene sentido, ya que el navegador solo necesita mantener la hoja de estilo analizada en la memoria, no el archivo original. Son solo 3 líneas de código:
function css_text(x) { return x.cssText; }
var file = document.getElementById(''css'');
var content = Array.prototype.map.call(file.sheet.cssRules, css_text).join(''/n'');
Sí, puedes usar $ .get.
Ejemplo:
$.get(''/path/to/css/file.css'', function (resp) {
// resp now should contain your CSS file content.
});
Si usó XMLHttpRequest para cargar la página, podría acceder a esos archivos sin tener que cargarlos por segunda vez.
es preferible no duplicar la tonelada para reducir el ancho de banda y la eficiencia.
¿Qué pasa si el css se genera dinámicamente y es diferente dependiendo del tiempo que se solicita?
podría cargar el contenido con una simple llamada get ajax, si se incluye la hoja de estilo del mismo dominio
Editar después de su actualización:
Probé este código (en FX10) como una prueba de concepto que usa solo una solicitud al CSS, pero me parece un poco intrépido y debería ser probado y verificado. también debería mejorarse con algún retroceso si javascript no está disponible.
CSS (archivo externo test.css )
div { border: 3px solid red;}
HTML / jQuery
<!doctype html >
<html>
<head>
<!-- provide a fallback if js not available -->
<noscript>
<link rel="stylesheet" href="test.css" />
</noscript>
</head>
<body>
<div></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script>
$(document).ready(function() {
$.when($.get("test.css"))
.done(function(response) {
$(''<style />'').text(response).appendTo($(''head''));
$(''div'').html(response);
});
})
</script>
</body>
</html>
Debería ver el código CSS dentro del div con un borde rojo alrededor :)
Disfrutar.