Wie ändert man die "html" -Elemente CSS

html { 
    width:100%; 
}

Wie ändert man das CSS des html Tags dynamisch beim Anklicken der Schaltfläche mit JavaScript? Ich meine, ich möchte das obige HTML-CSS wie unten beschrieben erstellen. Aber ich muss das dynamisch mit dem Skript ändern. Können wir das machen?Wie ändert man die "html" -Elemente CSS

html { 
    width:100%; 
    overflow-y: hidden; 
}

Quelle

2009-07-17 Anonymous

Wahrscheinlich gibt es einen einfacheren Weg, aber

htmlTags = document.getElementsByTagName("html") 
for(var i=0; i < htmlTags.length; i++) { 
    htmlTags[i].style.overflowY = "hidden"; 
}

Hoffnung Ich erinnerte mich an alles richtig gemacht.

Quelle

2009-07-17 04:15:34 Samuel

ah dank ich glaube nicht, das ich je mit Bindestrichen gesetzt Stileigenschaften vor – Samuel

Dieses Beispiel, wenn es funktioniert (ich nicht die Mühe zu überprüfen , und kann sich nicht daran erinnern), würde davon profitieren, einfach den ersten Wert zu ziehen, da es (idealerweise) immer nur ein HTML-Tag geben sollte. htmlTags = document.getElementsByTagName ("html") [0] .style.overflowY = "Versteckt"; –

Scheint, wie Sie wollen lernen, wie man ein Javascript-Framework/Toolkit verwenden:

jQuery
MooTools
usw.
usw.
usw.

Quelle

2009-07-17 04:18:22 beggs

+1. JQuery zu lernen ist ernsthaft Zeit gut investiert! –

Zunächst würde ich nicht empfehlen, zu setzen Stile auf dem HTML-Element direkt. Das body-Tag soll der oberste Knoten der DOM-Anzeigeliste sein, und Firefox interpretiert die auf html angewendeten Stile als Stile, die ohnehin auf body angewendet werden. Andere Browser verhalten sich möglicherweise anders.

Wie erwähnt, würde ich empfehlen, eines der beliebten JavaScript-Frameworks zu lernen. Sie machen es etwas einfacher (HTML-Traversing und Manipulation). So wie es aussieht, können Sie den folgenden Code mit Standard-DOM-Methoden schreiben. Dies erfordert ein Element mit einer ID "Schaltfläche" irgendwo in Ihrem Markup platziert.

<a id="button" href="#">Action!</a>

Folgendes in einen Script-Tag in <head>, oder in einem externen Skript hinzufügen (empfohlen).

window.onload = function(e) { 

    var button = document.getElementById("button"); 

    button.onclick = function(e) { 
     document.body.style.overflowY = "hidden"; 
     return false; 
    } 
}

Alternativ, wenn Sie jQuery verwenden möchten:

$(document).ready(function() { 
    $("#button").click(function(){ 
     $(document.body).css({ overflowY: "hidden"); 
    }); 
});

Quelle

2009-07-17 05:23:20 sixthgear

Wie ändert man die "html" -Elemente CSS

Antwort

Verwandte Themen