javascript ändern der body-ID (mit css) dynamisch Bezug auf die browser-Fenster Größe

Hier ist, was ich habe, aber es funktioniert nicht:

 if(window.width() < 1000)
document.getElementsByTagName('body')[0].id="be"
else
document.getElementsByTagName('body')[0].id="bd"
;

Sagen Sie mir bitte, was ich Schreibe, falsch ist. Bitte nicht sagen, andere Lösungen, bitte einfach diesen code beheben.

Im Grunde will ich eine andere ID für den BODY-tag einer Webseite, wenn der browser die Größe der Fenster ist weniger als 1000px.

  • Warum eine neue ID? Warum nicht einfach gib es eine Klasse? Auch, sind Sie immer Fehler? Wie Sie wissen, funktioniert es nicht?
  • DANKE FREUNDE!!! =D
InformationsquelleAutor techuser7777777 | 2011-04-05
  1. 8

    Hier gehen Sie:

    document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';

    Dieser code am Ende Ihrer Seite: 

    <script>
    function setBodyId() {
        document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';
    }           
    window.onload = setBodyId;
    window.onresize = setBodyId;
</script>

    Live-demo: http://jsfiddle.net/simevidas/THqXB/

    • das sieht toll aus, wie füge ich das zu meinem javascript? Neuling hier...
    • Sie möchten, führen Sie diese auf die Seite laden?
    • Ich will es ausführen, da dabei: wenn Benutzer browser-Fenster kleiner, wenn Sie das browser-Fenster kleiner als 1000px, dann möchte ich definieren, ID "werden"
    • Auch, habe ich diese in meine javascript-Datei, anstatt Sie auf meiner index-Seite. Ich einfach entfernt die <script> und </script>
    InformationsquelleAutor Šime Vidas
  2. 0

    Können Sie dies tun, mit javascript, aber die optimale Lösung ist der Einsatz von CSS Media Queries für solche Szenarien.

    finden Sie unter > CSS-Media-Queries als Browser Ändert?

    • bitte erzählen Sie mehr. Jedoch, wenn jemand eine Lösung zu den oben genannten code, bitte sagen Sie mir, weil der Zweck auch besser im schreiben von javascript.
    InformationsquelleAutor neebz
  3. 0

    window.width() ist nicht eine Funktion. Verwenden window.innerWidth oder window.outerWidth statt. (Prüfung der browser-Kompatibilität)

    • ah ich dachte, dass. versucht werden, kreativ zu sein! lol
    InformationsquelleAutor Wikeno
  4. 0

    Empfehle ich die Verwendung von jQuery, einer JavaScript-Bibliothek. Es behandelt eine Menge von browser-Inkompatibilität. Zum Beispiel innerWidth und outerWidth Eigenschaften werden nicht unterstützt in IE.

    Diese arbeiten werden cross-browser:

    $(function(){
    $("body").attr("id", $(window).width() < 1000 ? "be" : "bd");
});

    Wenn Sie möchten, es zu ändern, wenn sich das Fenster ändert, müssen Sie einen Ereignis-listener hinzufügen das Fenster resize-Ereignis:

    $(window).resize(function(){
    $("body").attr("id", $(this).width() < 1000 ? "be" : "bd");
});
    • das sieht auch toll aus. wo sollte ich das? Javascript Datei? Index main page-Datei (es ist index.php)? Und wie konkret? Zum Beispiel, was genau muss ich kopieren, in meine Javascript-Datei am Ende? Vielen Dank im Voraus!
    • auch bin ich mit Hilfe von jquery
    • okay, ich habe nur Hinzugefügt, dass der code auf der Unterseite. Allerdings passte meine gesamte Seite. In der Erwägung, dass, wenn ich nur definieren die ID von "werden" manuell in die index.php Datei, funktioniert es für die kleineren Fenster und nicht Durcheinander auf meiner Seite.
    • Sie sollten in der Lage sein, kopieren Sie die beiden code-snippets " wörtlich und setzen Sie Sie, wohin Sie wollen. Ich würde empfehlen, Sie in eine JavaScript-Datei zu halten JS-code getrennt von HTML.
    • Nevermind, mein schlechtes! Ich habe versehentlich entfernt die schließende } in der css-Datei (Hoppla!). aber dieses ist immer noch nicht funktioniert aus irgendeinem Grund...
    • okay, also ich habe das Problem gelöst. Aber wenn möglich, würde ich mag zu verwenden, Ihre Lösung, denn es erlaubt es, um die Arbeit auf IE auch.
    • Dies ist, was ich verwendet, was auch geklappt hat: - Funktion bodyID() { document.Körper.id = Fenster.innerWidth < 1000 ? 'die' : 'bd'; } window.onload = bodyID; Fenster.onresize = bodyID; Nun, können Sie mir bitte sagen, wie Sie zu benutzen, so dass es kompatibel mit dem IE auch, angesichts der obige code funktioniert?
    • Entschuldigung für die späte Antwort. Legen Sie einfach diese in Ihre JavaScript-Datei und in der head Ihrer php-Datei setzen eine Referenz darauf (z.B. <script type="text/javascript" src="LINK_TO_YOUR_FILE.js"></script>).
    • hi ZDYN, ich hatte dies bereits getan, aber es funktioniert nicht.
    • paar Fragen. Machen Sie auch einen link zu jQuery? Ist die src Pfad zu der Datei korrekt?
    • ja, tatsächlich habe ich es in einer anderen javascript-Datei (die gleiche, die ich benutze für den code, der funktioniert). Die Lage ist nicht das problem. Der code ist das problem.
    • Ich bin mir nicht sicher, was das problem dann. Sind Sie immer irgendwelche JavaScript-Fehler protokolliert? Hier ist eine demo der code: jsfiddle.net/wpXna
    • ich auch nicht. ill halten Sie einfach die funktionierende Lösung, und (@#&! IE! lol

    InformationsquelleAutor zdyn
Schreibe einen Kommentar