zugreifen können Regeln in externe CSSStyleSheet
Ich habe Schwierigkeiten, herauszufinden, warum .cssRules
und .rules
funktioniert nicht in meinem simpel-Farbe-generator-Projekt.
Ich habe eine <link>
element für meine externe CSS-Datei:
<link href="ColorGenerator.css" type="text/css" rel="stylesheet">
Und ein <script>
element für meine externe JS-Datei, bevor die </html>
element:
<script src="ColorGenerator.js" type="text/javascript"></script>
</html>
Dann habe ich das in meiner CSS-Datei:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#body {
background: #E1E1F4;
}
Und diese auf die JS-Datei:
var mySheet = document.styleSheets[0];
var body = document.getElementById("body");
body.onkeydown = function(e){
if(e.keyCode == 32){
mySheet.rules[0].style.background = "#ffa500";
}
};
Aber wenn ich drücken Sie die Leertaste(e.keyCode == 32
) nichts passiert, dann habe ich öffnen Sie die developer tools in Chrome und ich bekomme diese Fehlermeldung:
Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at HTMLBodyElement.body.onkeydown
Ich bin mir nicht sicher, ob Chrome nur nicht unterstützt, oder wenn ich einen Fehler in meinem code, eitherway, ich wirklich für jede Hilfe dankbar.
CSSStyleSheet
aber die fruchtbare Handbuch sagt, es hat eine cssRules
Mitglied, nicht rules
. Könnte das damit zusammenhängen?Ich habe versucht, mit beiden
.cssRules
und .rules
, aber beide geben mir den gleichen FehlerIn meinem Firefox-58 es funktioniert mit
cssRules
; Chrom-sagt "Fehler beim Lesen der 'cssRules' Eigenschaft von 'CSSStyleSheet'"". Ich weiß nicht, warum. Welchen browser verwenden Sie?Ich glaube, es gibt einen Fehler in Chrome 64. Ich habe gesehen, ein paar Fragen angemeldet, die auf verschiedenen Github-Projekte, die scheinen, verweisen auf das gleiche Problem. Viel Glück.
Machst du das auf einer Seite serviert von einem server (HTTP oder HTTPS)? Oder eine Seite im Datei-system (file:// - URL)? Letzteres könnte gebrochen werden und es wird allgemein nicht empfohlen, die Möglichkeit des browsing, wie es gebrochen ist (aus Sicherheitsgründen) in vielen Aspekten.
InformationsquelleAutor nico.user | 2018-03-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Als der Chrome 64, neue CORS Regeln für stylesheets. Sie müssen einen lokalen Entwicklungs-server zum lokalen testen der Funktionalität hängt das CSS-Objekt-Modell. Für details, siehe Zugreifen können cssRules von lokalen css-Datei in Chrome.
InformationsquelleAutor Brad Buchanan