堆棧內存溢出
  簡體   English   中英

使用JavaScript更改正文字體大小

[英]Change body font size with JavaScript

 原文  2015-04-19 19:10:46  3   4    javascript/ getelementsbytagname

問題描述

我試圖在scroll-y大於20時使用JavaScript更改font-size ，但是更改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>

4 個解決方案

解決方案1
 4 已采納  2015-04-19 19:14:54

document.getElementsByTagName（'body'）將返回一個列表。 要更改返回的正文樣式，您將需要訪問列表的第一個成員： 

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

解決方案2
 1  2015-04-19 19:15:38

當您使用getElementsByTagName獲取正文時，它返回元素的NodeList。 該NodeList不是DOM節點，因此它沒有style屬性。

您應該更改此： 

body = document.getElementsByTagName('body');

至 

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

解決方案3
 1  

為正文使用快捷方式： 

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

注意getElementsByTagName的復數形式，這意味着它返回HTMLCollection ，因此您需要對其使用索引： 

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

解決方案4
 -1  2015-04-19 19:16:15

您更改了body元素的字體大小，但是嵌套元素上的類對此進行了覆蓋，例如#nav

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 單擊一個按鈕更改文本的字體大小 <body> 在javascript / css中 javascript更改字體大小 使用javascript更改字體大小 自動更改正文字體大小 HTML Javascript字體大小更改 使用JavaScript快速更改字體大小 使用mailto（JavaScript）發送電子郵件-更改郵件正文中特定字符的字體大小或將其設置為粗體 鏈接的JavaScript不會更改html正文字體 Javascript onclick 按鈕更改頁面字體大小或 div 字體大小 如何更改正文的字體大小不影響子元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM