javascript - How do I generate a random font to a line of text every time page is refreshed?

I am trying to generate a new font every time my page is refreshed from a list in my JavaScript. I want 4 fonts total, and I want the line that reads "Font" to be the font that actually changes. I can't get the font to change at all anytime I refresh the page. Any way I can possibly do that with JavaScript? Here are some things I tried:

<script>
var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").src=fontType[num];
</script>

This didn't seem to work. I wondered I'd have to call an ID for the fonts, but is there even such a thing as "GetelementById(fontfamily)"? This was also in my body tags.

var font = [];
font[0] = "Times New Roman";
font[1] = "Arial";
font[2] = "Helvetica";

Would this be a better option? How would I get this to randomly choose?

<script>
var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").src=fontType[num];
</script>

This didn't seem to work. I wondered I'd have to call an ID for the fonts, but is there even such a thing as "GetelementById(fontfamily)"? This was also in my body tags.

var font = [];
font[0] = "Times New Roman";
font[1] = "Arial";
font[2] = "Helvetica";

Would this be a better option? How would I get this to randomly choose?

Share Improve this question edited Feb 18, 2014 at 18:58 user2203117 asked Feb 18, 2014 at 18:50 user3324837 411 gold badge2 silver badges3 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

You want document.getElementById("fontfamily").style.fontFamily;

Whenever you want to style an element using JavaScript, use .style then camelcase the css attribute. so font-family bees fontFamily, background-image bees backgroundImage

var fontType = [ "Arial", "Verdana", "Helvetica"];
var num;
num=Math.floor(Math.random()*3);
document.getElementById("fontfamily").style.fontFamily =fontType[num];

http://jsfiddle/DZnbR/

Here you go :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <link href="https://fonts.googleapis./css?family=Open+Sans|Raleway|Roboto" rel="stylesheet">

        <style>
            .Roboto{
                font-family: 'Roboto', sans-serif;
            }
            .Open_Sans{
                font-family: 'Open Sans', sans-serif;
            }
            .Roboto{
                font-family: 'Raleway', sans-serif;
            }
        </style>
    </head>
    <body id="body">

        <script>

            var fonts = ['Roboto', 'Open_Sans', 'Raleway'];
            var rand = fonts[Math.floor(Math.random() * fonts.length)];
            console.log(rand);

            var bodyElement = document.getElementById("body");
            bodyElement.className = rand;
        </script>
    </body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I generate a random font to a line of text every time page is refreshed? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)