堆栈内存溢出
  简体   繁体   English

使用JavaScript更改正文字体大小

[英]Change body font size with JavaScript

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

问题描述

I am trying to change my font-size with JavaScript when the scroll-y is greater than 20 , but changing the font-size is not working for me. 我试图在scroll-y大于20时使用JavaScript更改font-size ，但是更改font-size对我不起作用。

Can anyone tell me what I am doing wrong? 谁能告诉我我在做什么错？ I don't understand what I am doing wrong... 我不明白我在做什么错... 

<!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') will return a list. document.getElementsByTagName（'body'）将返回一个列表。 To change the style of the body returned you will need to access the first member of the list: 要更改返回的正文样式，您将需要访问列表的第一个成员： 

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

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

When you use getElementsByTagName to get the body, it returns a NodeList of elements. 当您使用getElementsByTagName获取正文时，它返回元素的NodeList。 This NodeList is not a DOM node, so it doesn't have the style attribute on it. 该NodeList不是DOM节点，因此它没有style属性。

You should change this: 您应该更改此： 

body = document.getElementsByTagName('body');

to 至 

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

解决方案3
 1  

Use a shortcut for body: 为正文使用快捷方式： 

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

Notice the plural form of getElementsByTagName which means it returns an HTMLCollection , so you need to use an index with it: 注意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中 - click a button to change text font-size of <body> in javascript/css javascript更改字体大小 - javascript change font size 使用javascript更改字体大小 - change font size with javascript 自动更改正文字体大小 - Change body font-size automatically HTML Javascript字体大小更改 - HTML Javascript font size change 使用JavaScript快速更改字体大小 - Change font size on fly with javascript 使用mailto（JavaScript）发送电子邮件-更改邮件正文中特定字符的字体大小或将其设置为粗体 - Send email using mailto (JavaScript) — change the font size of the specific characters inside the mail body or make it BOLD 链接的JavaScript不会更改html正文字体 - Linked JavaScript does not change the html body font Javascript onclick 按钮更改页面字体大小或 div 字体大小 - Javascript onclick button to change page font size or div font size 如何更改正文的字体大小不影响子元素 - How to change font size of body not affecting child elements
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM