Einstellung einer CSS-Variable über Javascript

-1

Ich versuche, die Höhe und Breite des Browser-Fensters zu erhalten und es auf dem Körper anzuzeigen sowie die Höhe anzupassen.Einstellung einer CSS-Variable über Javascript

Hier ist mein aktueller Code:

window.onresize = window.onload = function() { 
    width = this.innerWidth; 
    height = this.innerHeight; 
    document.body.innerHTML = width + 'x' + height; // For demo purposes 
}

Der obige Code zeigt die Breite und Höhe auf dem Körper ok, jetzt Zeit, es zu einem CSS-Variable hinzuzufügen:

var header = document.querySelector('.header') 

window.onresize = window.onload = function() { 
    width = this.innerWidth; 
    height = this.innerHeight; 
    header.style.setProperty('--height', height); 
    header.style.setProperty('--width', width); 
    document.body.innerHTML = width + 'x' + height; // For demo purposes 
}

Ich weiß, dass der Code ist nicht korrekt, aber ich kann keine Probe zum Vergleichen finden, hier ist eine Geige nur für den Fall, dass der Code nicht genug ist.

https://jsfiddle.net/rbtwsxd8/6/

Quelle

2017-07-17 Dan

Haben Sie in der Konsole aussehen ...? 'header' ist' null'. Sie haben Ihren Code in '' geschrieben, ohne auf das Laden des Dokuments zu warten, damit die Selektoren ihre Elemente nicht finden. Sie schreiben auch die '' auf resize und entfernen damit Ihr' header' Element vollständig. – Santi

Entschuldigung Ich bin neu in Javascript. Verstehe nicht, warum das null ist, wenn ich document.getElementById ("header") verwende und die Klasse in id im div ändere und die Zeile header.style.setProperty ('- height', height) ersetze; mit document.getElementById ("header"). style.setProperty ('- height', height); das funktioniert, denke ich, obwohl meine Größe immer noch nicht ändert – Dan

In JSFiddle haben Sie den Code zum Einbetten * "Kein Umbruch in " *, was bedeutet, dass es in den Kopf Ihrer Seite in '

window.onresize = window.onload = function() { 
    var header = document.querySelector('.header') 
    width = this.innerWidth; 
    height = this.innerHeight; 
    header.innerHTML = width + 'x' + height; // For demo purposes 
    header.style.setProperty('height', height + 'px') 
    header.style.setProperty('width', width + 'px'); 
    //header.style.height = height + 'px'; 
    //header.style.width =width + 'px'; 
}

fiddle

Quelle

2017-07-17 14:10:23

Ich war in diesem Fall nicht der Downvoter, aber das ist die Art von Antwort, die ich oft * mache * downvote: es ist nur ein Code-Dump, ohne Erklärung, was mit dem ursprünglichen Code nicht stimmte. –

Der Fragesteller fragt nur nach Code zum Vergleichen. Lass ihn lernen, indem du fragst. –

Ich bin nicht der Meinung, dass das sehr hilfreich ist, @FazalRasel, aber deshalb gibt es überhaupt ein Upvote/Downvote-System: Wir alle stimmen darüber ab, was eine gute Antwort ist. –

Verwandte Themen