使用 JavaScript 更改正文字体大小

Question

当 scroll-y 大于 20 时，我正在尝试将 font-size 更改为 JavaScript，但更改 font-size 对我.

谁能告诉我我做错了什么？我不明白我做错了什么...

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if IE 7]><html xml:lang="nl-NL" lang="nl-NL" class="ie ie7"><![endif]-->
<!--[if IE 8]><html xml:lang="nl-NL" class="ie8"><![endif]-->
<!--[if (lt IE 8)|(gt IE 8)|!(IE)]><!--><html xml:lang="nl-NL" lang="nl-NL"><!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8" />


<title>Reken op je toekomst!</title>

<style>

body {
    width:100%;
    margin:0px;
    background-color:white;
    font-family:'normal';
    font-size:24px;
    text-align:center;
}

/* LETTERTYPE   LETTERTYPE   LETTERTYPE   LETTERTYPE   LETTERTYPE    LETTERTYPE   LETTERTYPE    LETTERTYPE    LETTERTYPE  */

@font-face {
    font-family: 'special';
    src: url(Fonts/FFF_Tusj.ttf);
}
@font-face {
    font-family: 'normal';
    src: url(Fonts/PrintClearly.otf);
}
.special {
    font-family:'special';
    font-size:24px;
}

/*  NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV     NAV  */
#nav {
    width:100%;
    height:78px;
    position:fixed;
    top:0px;
    background-color: red;
    transition: height 0.3s linear 0s, padding 0.3s linear 0s;
    overflow:hidden;
}

/* ---------------------------------------------------------------------------------------------------------------------- */

#nav .button_wrapper {
    width:100%;
    margin:auto;
    background-color:;
}
#nav #button {
    padding: 8px 8px;
    margin:auto;
    list-style-type: none;
    display: inline; 
}
#nav #button li {
    display: inline; 
}
#nav #button  a{
    padding: 8px 8px;
    text-decoration: none;
    color:#2E2E2E;
}
#nav #button a:hover  {
    border-radius:3px;
    border-color:rgb(207, 211, 212);
    background-color:rgb(207, 211, 212);
    color:black;
}
#button .special a:hover {
    background-color:#FFE9C9 !important;
}

/* ---------------------------------------------------------------------------------------------------------------------- */

.nav_shadow {
    position:relative;
    opacity:0.3;
    -webkit-transition: opacity .5s ease-in;
    -moz-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in;
}
.nav_shadow img {
    position:relative;
    height:20px;
    width:100%;
    margin:auto;
    display:block;
}
#nav:hover .nav_shadow {
    opacity:1;
}
.nav_shadow:hover .nav_shadow {
    opacity:1;
}





/*  MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN    MAIN  */

#mainbox {
    width:100%;
    height:600px;
    background-color:white;
}
#mainbox .two_article {
    width:60%;
    margin:auto;
}
#mainbox .two_article .self{
    float:left;
    width:50%;
}
#mainbox .two_article .self a{
    text-decoration:none;
    padding: 7px 60px;
    border-radius:3px;
    border-color:black;
    border-width:1px;
    background-color:#FFE9C9;
    font-size:30px;
    color:white;
    transition: padding .3s ease-in;
}
#mainbox .two_article .self a:hover {
    width:110%;
    background-color:#FFDAA6;
    padding: 10px 80px;
    color:white;
}


/*  FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER    FOOTER  */

#footer {
    width:100%;
    height:400px;
    background-color:rgb(247, 247, 247);
}

</style>

</head>

<body>
<script>

var pagetop, yPos;
function yScroll(){
    pagetop = document.getElementById('nav');
    body = document.getElementsByTagName('body');
    yPos = window.pageYOffset;
    if(yPos > 20){
        pagetop.style.height = "60px";
        pagetop.style.paddingTop = "0px";
        body.style.fontSize = "10px";
    } else {
        pagetop.style.height = "78px";
        pagetop.style.paddingTop = "0px";
        body.style.fontSize = "24px";
    }
}
window.addEventListener("scroll", yScroll);

</script>

<div id="nav">
    <div class="button_wrapper">
        <ul>

            <div id="button"><li class="special"><a href="index.html">Reken op je Toekomst</a></li></div>
            <div id="button"><li class="opmaak"><a href="">Iphone</a></li></div>
            <div id="button"><li class="opmaak"><a href="">Ipad</a></li></div>
            <div id="button"><li class="opmaak"><a href="">Blog</a></li></div>
            <div id="button"><li class="opmaak"><a href="">About</a></li></div>

        </ul>
    </div>
    <div class="nav_shadow"><img src="images/navigation-shadow-radial.png"/></div>
</div>

<div id="mainbox">
<br>
<br>
<br>
    <div class="two_article">
        <div class="self">

            <a href="">Iphone</a>

        </div>

        <div class="self"><a href="">Ipad</a></div>
    </div>

</div>

<div id="footer">
</div>

</body>
</html>

Answer 1

document.getElementsByTagName('body') 将 return 一个列表。要更改正文的样式 returned，您需要访问列表的第一个成员：

var body = document.getElementsByTagName('body')[0]

Answer 2

当您使用 getElementsByTagName 获取正文时，它 returns 是一个元素的 NodeList。此 NodeList 不是 DOM 节点，因此它没有 style 属性。

你应该改变这个：

body = document.getElementsByTagName('body');

到

body = document.getElementsByTagName('body')[0];

Answer 3

您更改了 body 元素上的字体大小，但类嵌套元素上的字体大小被覆盖了，例如 #nav

Answer 4

为正文使用快捷方式：

var body = document.body;   // or just use it directly

注意 getElementsByTagName 的复数形式，这意味着它是 returns 和 HTMLCollection，因此您需要对其使用索引：

var body = document.getElementsByTagName('body')[0]; // first item in collection

使用 JavaScript 更改正文字体大小

Change body font size with JavaScript

javascript

getelementsbytagname