最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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?

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?

Share Improve this question edited Feb 18, 2014 at 18:58 user2203117 asked Feb 18, 2014 at 18:50 user3324837user3324837 411 gold badge2 silver badges3 bronze badges
Add a ment  | 

2 Answers 2

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>

发布评论

评论列表(0)

  1. 暂无评论