Estou obtendo as regras da folha de estilo para esta situação tratada nesta pergunta.
Mas se utilizar CSS interno (com a tag <style>
) obtenho corretamente os estilos declarados, como podem ver no exemplo a seguir:
var sheets = document.styleSheets;
for (var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (rules[r].selectorText) {
// para imprimir no DOM
document.body.appendChild(document.createTextNode(rules[r].cssText));
document.body.appendChild(document.createElement("br"));
}
}
}
p {
color: red;
}
h1 {
font-size: 16pt;
}
Já se utilizo de um arquivo CSS externo, o document.styleSheets
até traz a folha de estilo, mas as regras (rules
ou cssRules
) estão null
, e o atributo href
está com o valor da url
externa que aponta para o arquivo. Como pode ser visto no exemplo a seguir:
var sheets = document.styleSheets;
for (var i in sheets) {
if (sheets[i] instanceof CSSStyleSheet) {
console.log(sheets[i]);
}
var rules = sheets[i].rules || sheets[i].cssRules;
for (var r in rules) {
if (rules[r].selectorText) {
// para imprimir no DOM
document.body.appendChild(document.createTextNode(rules[r].cssText));
document.body.appendChild(document.createElement("br"));
}
}
}
<!-- Utilizei o CSS do bootstrap por ser um CSS confiável externo para demonstrar meu problema -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">
<p>Verifique o console para observar as saídas!</p>
Pergunta
Há alguma forma de obter as regras CSS utilizando arquivo externo de CSS (Exemplo 2), assim como acontece com o CSS interno (Exemplo 1)?
Testando aqui reparei que no Firefox, isso está funcionando, mas no Chrome, no IE10 e no Opera não.
window.onload
.file:///
.