如何更改javascript代碼中的字體
[英]How to change font inside a javascript code
問題描述
我是編程的新手。 我這里有我的 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>
例如，上面的代碼將生成隨機引號。 現在我如何通過單擊此代碼中的按鈕來更改字體系列？
提前致謝。
4 個解決方案
解決方案1
1 2017-10-14 22:07:19
看着這個：
<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;
}
解決方案2
0 2017-10-14 22:30:01
一些需要改進的地方：
- 不要使用
document.write，而是在 HTML 中保留一個元素，您將用引號填充該textContent，並將其分配給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. - JK 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>
解決方案3
0 2017-10-14 22:44:52
因為你是新手，最好不要養成壞習慣，不幸的是，這很容易做到，因為那里的很多代碼只是被不知道更好的人復制和粘貼，所以：
盡量不要像這樣編寫內聯樣式或內聯事件處理程序：
<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. - JK 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>
解決方案4
0 2017-10-14 22:46:30
簡而言之，這是工作示例：
<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. - JK Rowling' ]; function generateRandomQuote() { var quoteIndex = Math.floor((Math.random() * theQuote.length)); quoteHolder.innerHTML = theQuote[ quoteIndex ]; } </script> </body>- 在 css 中你應該定義單位，你只有數字，
- 不應有任何 h1 或圖像或 body 標簽之外的任何元素，
- 最好只是將您想要的內容附加到某個 div，而不是刷新整個頁面，
- ...
我看到你已經有了答案。
在JavaScript代碼中與其他JavaScript代碼一起定義字體
[英]Defining font inside javascript code with other javascript code
如何使事件監聽器更改javascript代碼中的變量？
[英]How to make event listener to change a variable inside javascript code?
如何更改 JavaScript function 生成的 docx 中的字體
[英]How to change font in docx generated by JavaScript function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.