如何更改“html”元素的CSS [英] How to change the "html" element's CSS

查看:130
本文介绍了如何更改“html”元素的CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

html {
    width:100%;
}

如何更改 html 标签动态地点击按钮使用JavaScript?我的意思是我想使上面的HTML CSS如下所述。但是我必须使用脚本动态更改。我们可以这样做吗?

How to change the CSS of the html tag dynamically on clicking the button using JavaScript? I mean I want to make the above HTML CSS as written below. But I have to change this dynamically using script. Can we do this?

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


推荐答案

不推荐直接在html元素上设置样式。 body标签是DOM显示列表的顶层节点,Firefox将解释应用于 html 的样式作为应用于 body 反正。其他浏览器可能会有不同的行为。

First of all, I would not recommend setting styles on the html element directly. The body tag is meant to be the top node of the DOM display list, and Firefox will interpret styles applied to html as styles applied to body anyway. Other browsers may behave differently.

像上面提到的,我建议学习一个流行的javascript框架。他们使这样的东西(HTML遍历和操作)更容易一些。就像它,你可以使用标准DOM方法编写以下代码。这需要在您的标记中添加一个标识为button的元素。

As beggs mentioned, I would recommend learning one of the popular javascript frameworks. They make things like this (HTML traversing and manipulation) a little easier. As it stands, you can write the following code using standard DOM methods. This requires an element with an id of "button" placed somehwhere in your markup.

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

将以下内容添加到< head> 或外部脚本(推荐)。

Add the following to a script tag in <head>, or in an external script (recommended).

window.onload = function(e) {

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

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

或者,如果要使用jQuery: p>

Alternatively, if you want to use jQuery:

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

这篇关于如何更改“html”元素的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆