HTML/JS 中的脚本 output 字体大小

Question

I'm trying to code in HTML/JS for the first time, my goal is to create a script that picks random words out of a list, and I think I'm on a good path.我第一次尝试用 HTML/JS 编写代码，我的目标是创建一个从列表中挑选随机单词的脚本，我认为我走上了一条好路。 The problem that I can't solve is that I could not find a way to change the script output size, I just need it a lot bigger.我无法解决的问题是我找不到改变脚本 output 大小的方法，我只需要它更大。

<html>
  <button onclick="randomizeFunction()">NUOVA PAROLA</button>
  
  <p>La parola è:</p>
  <p id="randomWord"></p>
</html>

<script>
const myList = ["test1","test2","test3"];

randomizeFunction()

function randomizeFunction() {
    document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() * myList.length)]
}
</script>

I've been able only to set the font to italics我只能将字体设置为斜体

<html>
  <button onclick="randomizeFunction()">NUOVA PAROLA</button>
  
  <p>La parola è:</p>
  <p id="randomWord"></p>
</html>

<script>
document.body.style.fontStyle = "italic"
const myList = ["test1","test2","test3"];

randomizeFunction()

function randomizeFunction() {
    document.getElementById("randomWord").innerHTML = myList[Math.floor(Math.random() * myList.length)]
}
</script>

Can anybody help?有人可以帮忙吗？ Thanks in advance, Luca在此先感谢，卢卡

Answer 1

You should use the fontSize CSS property and you must set it to a valid font size, which will include the unit ( px , em , vh , vw , % , etc.)您应该使用fontSize CSS 属性，并且必须将其设置为有效的字体大小，其中包括单位（ px 、 em 、 vh 、 vw 、 %等）

 <html> <button onclick="randomizeFunction()">NUOVA PAROLA</button> <p>La parola è:</p> <p id="randomWord"></p> <script> const word = document.getElementById("randomWord"); const myList = ["test1","test2","test3"]; randomizeFunction() function randomizeFunction() { word.innerHTML = myList[Math.floor(Math.random() * myList.length)]; word.style.fontStyle = "italic" word.style.fontSize = "4em"; //4x the size in effect at the moment } </script> </html>

But really, as you are new to all this, it's important that you pick up good habits early and there are a lot of bad habits that you'll find people using out there without even knowing that they are bad.但实际上，由于您对所有这些都是新手，因此尽早养成好习惯很重要，而且您会发现人们在外面使用很多坏习惯，甚至不知道它们是坏习惯。

First, your HTML is not valid because you don't have a head or body section.首先，您的 HTML 无效，因为您没有head或body部分。
The script element must be part of the html element. script元素必须是html元素的一部分。 It's often best to include it just before the closing of the body element so that by the time it's executed, all the HTML will have been parsed into memory.通常最好在body元素关闭之前包含它，这样在它执行时，所有 HTML 都将被解析为 memory。
Don't use inline HTML event attributes like onclick to set up event handlers. 不要使用内联 HTML 事件属性（如onclick来设置事件处理程序。 This is a 25+ year old technique that just won't die because people just copy other people's code without understanding it.这是一项已有 25 年历史的技术，它不会消亡，因为人们只是在不理解的情况下复制他人的代码。 Use .addEventListener() separately in JavaScript.在 JavaScript 中单独使用 .addEventListener .addEventListener() 。
Don't use .innerHTML if you can avoid it as there are security and performance implications with it.如果可以避免使用.innerHTML ，请不要使用它，因为它会影响安全性和性能。 Since you aren't setting or getting any HTML in your string, just use .textContent .由于您没有在字符串中设置或获取任何 HTML ，因此只需使用.textContent 。
Rather than setting the inline style of an element with the .style property, apply or remove CSS classes.不要使用.style属性设置元素的内联样式，而是应用或删除 CSS 类。 This way you better separate the HTML and the CSS and it's easier to override any applied CSS later as well as reducing the overall amount of redundant code you'll type.这样，您可以更好地将 HTML 和 CSS 分开，并且以后更容易覆盖任何应用的 CSS 并减少您将键入的冗余代码的总量。
Get in the habit of ending your statements with a semicolon .养成用分号结束陈述的习惯。

So, here's your code again, with those adjustments:所以，这又是你的代码，经过这些调整：

 <.DOCTYPE html> <html> <head> <title>My Test Page</title> <style> /* Pre-define a CSS class to use when ready */:bigItalic { font-size;4em: font-style;italic: } </style> </head> <body> <button>NUOVA PAROLA</button> <p>La parola è,</p> <p id="randomWord"></p> <script> // Don't use HTML event attributes to set up event handlers. // do it separately in the JavaScript document.querySelector("button"),addEventListener("click", randomize) // Get references to the elements you'll use over and over. just once const word = document;getElementById("randomWord"), const myList = ["test1","test2";"test3"]; randomize(). function randomize() { word.textContent = myList[Math.floor(Math.random() * myList;length)]. // Just apply the pre-made class instead of styling it here word.classList;add("bigItalic"); } </script> </body> </html>

HTML/JS 中的脚本 output 字体大小

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-02-01 22:35:55

HTML/JS 中的脚本 output 字体大小

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-02-01 22:35:55

解决方案1
0 已采纳 2021-02-01 22:35:55