Question

html {
    width:100%;
}

如何使用JavaScript单击按钮动态更改html标记的CSS？我的意思是我想制作上面的HTML CSS，如下所示。但我必须使用脚本动态更改它。我们可以这样做吗？

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

Answer 1

可能有一种更简单的方法，但

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

希望我记得一切正确。

Answer 2

好像你想学习如何使用javascript框架/工具包：

jQuery
MooTools
等
等
等

Answer 3

首先，我不建议直接在html元素上设置样式。 body标签是DOM显示列表的顶级节点，Firefox会将应用于html的样式解释为应用于body的样式。其他浏览器可能表现不同。

如上所述，我建议学习一种流行的javascript框架。他们使这样的事情（HTML遍历和操作）变得容易一些。就目前而言，您可以使用标准DOM方法编写以下代码。这需要在标记中放置id为“button”的元素。

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

将以下内容添加到<head>中的脚本标记或外部脚本中（推荐）。

window.onload = function(e) {

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

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

或者，如果你想使用jQuery：

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

如何更改“html”元素的CSS

3 个答案: