How to change the “html” element's CSS

前端未结

关注

 3  1327

html {
    width:100%;
}

How to change the CSS of the html tag dynamically on clicking the button using JavaScript? I mean I want to make

相关标签:

3条回答

抹茶落季

2021-01-29 02:31
There's probably a simpler way, but
```
htmlTags = document.getElementsByTagName("html")
for(var i=0; i < htmlTags.length; i++) {
    htmlTags[i].style.overflowY = "hidden";
}
```
Hope I remembered everything right.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2021-01-29 02:37
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.

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>
```
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;
    }
}
```
Alternatively, if you want to use jQuery:
```
$(document).ready(function() {
    $("#button").click(function(){ 
        $(document.body).css({ overflowY: "hidden" );
    });
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光说笑

2021-01-29 02:48
Seems like you would want to learn how to use a javascript framework/toolkit:
- jQuery
- MooTools
- etc.
- etc.
- etc.
0 讨论(0)
发布评论:

提交评论
- 加载中...