如何更改javascript代碼內的字體

我是編程中的新手。我在這裏有我的JavaScript代碼。它的工作正常，但我想要一個不同的風格。如何更改javascript代碼內的字體

此代碼是一個隨機報價生成器。

<html> 
<head> 
<title> 
Daily Quotes 
</title> 
</head> 
<h1>Inspirational Quotes</h1> 
<body> 
     <script language="JavaScript"> 
    var quoteGroups=70; 
    var quoteNum; 
    var theQuote=new Array(); 
    theQuote[0]='Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker'; 
    theQuote[1]='If you\'re not part of the solution, you\'re part of the problem. - African Proverb'; 
    theQuote[2]='When you confront a problem you begin to solve it. - Rudy Giuliani'; 
    theQuote[3]='I dream of painting and then I paint my dream. - Vincent Van Gogh'; 
    theQuote[4]='Be silent or let thy words be worth more than silence. - Pythagoras'; 
    theQuote[5]='The past cannot be changed. The future is yet in your power. - Mary Pickford'; 
    theQuote[6]='Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling'; 

var quoteNum = Math.round(Math.random() * quoteGroups); 
document.write(theQuote[quoteNum]); 
</script> 
<div> 
<button style="background-color:lightgreen;width:230;height:70;border: none; font: bold 25px GreatVibes;" onclick="history.go(0)">Inspire Me More!</button> 
    </div> 
<div> 

<button style="background-color:blue;width:200;height:70" onclick=>Share</button> 

</div> 
</body> 
<img src="images/bg.jpg" id="bg" alt=""> 
</html>

例如，上面的代碼將生成隨機引號。現在如何更改字體系列，因爲點擊了此代碼中的按鈕？

在此先感謝。

來源

2017-10-14 Lloyd Celeste

你嘗試過什麼嗎？ –

最好在css中定義類，然後在JavaScript中添加/刪除元素中的類。 –

你可以添加一個元素，只是'element.style.font =「bold 25px GreatVibes」' – TheCrzyMan

看着這樣的：

<button style="background-color:blue;width:200;height:70" onclick=>Share</button>

你沒有功能設置的onclick。這樣做：

<button style="background-color:blue;width:200;height:70" onclick="changeFont(this, 'font name');">Share</button>

changeFont:

function changeFont(element, name) { 
    element.style.fontFamily = name; 
}

來源

2017-10-14 22:07:19 Cilan

一些事情，以改善：

不要使用document.write，而是保留在你的HTML元素，你將與填充報價，分配到textContent;
不要在隨機生成表達式中使用round，但floor，否則你可能會產生一個值超出範圍
不要使用單獨的變量爲你報價的數量（目前不不符合實際的數字），但使用theQuote.length
不要在你的HTML定義長style值，但使用CSS類，而不是
不要在每一次點擊重新加載頁面，但在當前頁面內更改報價無需導航。

要動態設置字體，您甚至可以隨機選擇一些CSS類以供選擇。

這裏是它如何工作的：

function displayQuote() { 
 
    var theQuote= [ 
 
     "Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker", 
 
     "If you're not part of the solution, you're part of the problem. - African Proverb", 
 
     "When you confront a problem you begin to solve it. - Rudy Giuliani", 
 
     "I dream of painting and then I paint my dream. - Vincent Van Gogh", 
 
     "Be silent or let thy words be worth more than silence. - Pythagoras", 
 
     "The past cannot be changed. The future is yet in your power. - Mary Pickford", 
 
     "Anything's possible if you've got enough nerve. - J.K. Rowling" 
 
    ]; 
 

 
    var quoteNum = Math.floor(Math.random() * theQuote.length); 
 
    var clsName = "special" + Math.floor(Math.random() * 3); // choose random font style 
 

 
    quote.textContent = theQuote[quoteNum]; 
 
    quote.className = clsName; 
 
} 
 
next.onclick = displayQuote; // execute on click 
 
displayQuote(); // execute on page load

.shareButton { 
 
    background-color:blue; 
 
    width:200; 
 
    height:70 
 
} 
 
.inspireButton { 
 
    background-color:lightgreen; 
 
    width:230; 
 
    height:70; 
 
    border: none; 
 
    font: bold 25px GreatVibes; 
 
} 
 
.special0 { 
 
    font-family: Georgia; 
 
    font-size: 24px; 
 
    color: #444; 
 
} 
 
.special1 { 
 
    font-family: Calibri; 
 
    font-size: 32px; 
 
    color: #844; 
 
} 
 
.special2 { 
 
    font-family: Tahoma; 
 
    font-size: 28px; 
 
    color: #484; 
 
}

<div id="quote"> 
 
</div> 
 
<div> 
 
    <button id="next" class="inspireButton">Inspire Me More!</button> 
 
</div>

來源

2017-10-14 22:30:01 trincot

如你是新的，最好不要拿起壞習慣，不幸的是很容易做到，因爲這麼多的代碼那裏只是複製和粘貼誰不知道更好的人，所以：

儘量不要寫這樣的內聯樣式或內聯事件處理程序：

<button style="background-color:lightgreen;width:230;height:70;border: none; font: bold 25px GreatVibes;" onclick="history.go(0)">Inspire Me More!</button>

正如您所看到的，它使得代碼難以閱讀，因爲在該元素中有3種語言！

相反，將您的語言分爲自己的部分，甚至文件。

關於CSS樣式，最好先提前定義CSS類，然後切換到您需要的類，而不是編寫所有內聯CSS。

您的代碼中也有一些錯誤。

所以，這是您的代碼的更新版本，也會更改字體。請務必查看評論以獲取詳細信息。

<html> 
 
<head> 
 
    <title>Daily Quotes</title> 
 
    <style> 
 
    /* We'll separate the CSS into this section and prepare pre-made classes for styles. 
 
     See how much cleaner this is, not only here but in the HTML as well? */ 
 
    button { 
 
     background-color:lightgreen; 
 
     width:230;height:70; 
 
     border: none; 
 
     font: bold 25px GreatVibes; 
 
    } 
 
    
 
    .share { 
 
     background-color:blue; 
 
     width:200px; /* Don't forget to add the unit */ 
 
     height:70px; /* Don't forget to add the unit */ 
 
    } 
 
    
 
    #output { 
 
     /* Now, just the output area has its own style! */ 
 
     font-family: fantasy; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <!-- All your content must be between the opening and closing body tags. --> 
 
    <h1>Inspirational Quotes</h1> 
 
    <div> 
 
    <button>Inspire Me More!</button> 
 
    </div> 
 
    <div> 
 
    <button class="share">Share</button> 
 
    <img src="images/bg.jpg" id="bg" alt=""> 
 
    </div> 
 
    
 
    <!-- Don't use document.write() to inject content into a page. Instead, prepare an 
 
     element ahead of time that you will update later. --> 
 
    <div id="output"></div> 
 
    <!-- Place your script tags just before the closing of the body tag. That way, you can be 
 
     sure that any HTML element you reference in the script has already been read into memory. --> 
 
    <script> 
 
    // First, get references to the HTML elements you'll want to work with: 
 
    var btn = document.querySelector("button"); 
 
    var out = document.getElementById("output"); 
 
    
 
    // Then, set up your event handlers in JavaScript, not in HTML 
 
    btn.addEventListener("click", getQuote); 
 
    
 
    function getQuote(){ 
 
     
 
     // Here's a simpler way to set up an array: 
 
     var theQuotes= [ 
 
     'Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker', 
 
     'If you\'re not part of the solution, you\'re part of the problem. - African Proverb', 
 
     'When you confront a problem you begin to solve it. - Rudy Giuliani', 
 
     'Dream of painting and then I paint my dream. - Vincent Van Gogh', 
 
     'Be silent or let thy words be worth more than silence. - Pythagoras', 
 
     'The past cannot be changed. The future is yet in your power. - Mary Pickford', 
 
     'Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling' 
 
     ]; 
 

 
     // You only want your radom number to be from 0 to the amount of the quotes array -1 
 
     var quoteNum = Math.floor(Math.random() * theQuotes.length); 
 
     
 
     // Now, just update the prexisting element: 
 
     output.textContent = theQuotes[quoteNum]; 
 
    } 
 
</script> 
 
</body> 
 
</html>

來源

2017-10-14 22:44:52

總之

，這裏是工作示例：

<body onload="generateRandomQuote()"> 
 
    <h1>Inspirational Quotes</h1> 
 
    <div id="quote-holder" style="font-family: sans-serif; color: red;"> 
 
    </div> 
 
    <div> 
 
     <button style="background-color: lightgreen; width:230px; height:70px; border: none; font: bold 25px GreatVibes;" onclick="generateRandomQuote()">Inspire Me More!</button> 
 
    </div> 
 

 
    <button style="background-color: blue; width: 200px; height: 70px" onclick="">Share</button> 
 

 
    <img src="images/bg.jpg" id="bg" alt=""> 
 

 
    <script> 
 
     var quoteHolder = document.getElementById('quote-holder'); 
 
     var theQuote = [ 
 
      'Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker', 
 
      'If you\'re not part of the solution, you\'re part of the problem. - African Proverb', 
 
      'When you confront a problem you begin to solve it. - Rudy Giuliani', 
 
      'I dream of painting and then I paint my dream. - Vincent Van Gogh', 
 
      'Be silent or let thy words be worth more than silence. - Pythagoras', 
 
      'The past cannot be changed. The future is yet in your power. - Mary Pickford', 
 
      'Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling' 
 
     ]; 
 

 
     function generateRandomQuote() { 
 
      var quoteIndex = Math.floor((Math.random() * theQuote.length)); 
 
      quoteHolder.innerHTML = theQuote[ quoteIndex ]; 
 
     } 
 

 

 

 
    </script> 
 

 
    </body>

在CSS中，你應該定義單位，你就只是數字，
有不該任何h1或圖像或任何元素o utside你的身體標記，
這是更好地只是你想要的內容附加到某些格，而不是刷新整個頁面，
...

我看到你已經有了答案。

來源

2017-10-14 22:46:30 user8672473

如何更改javascript代碼內的字體

回答

相關問題