我正在嘗試使用 javascript 增加頁面的字體大小。我有這段代碼，但它沒有按預期作業。有人可以檢查我做錯了什么嗎？
這是 HTML 和 javascript 代碼：
<body>
<center>
<button type="button"
onclick="changeSizeByBtn(15)" name="btn1">
-A
</button>
<button type="button"
onclick="changeSizeByBtn(20)" name="btn2">
A
</button>
<button type="button" onclick="changeSizeByBtn(25)"
name="btn3">
A
</button>
<br /><br />
<div style="padding: 20px; margin: 50px;
font-size: 20px; border: 5px solid red;"
id="container" class="container">
<p>
I need to increase this texts here by clicking on A button and decrease them by clicking -A button above.<br>
Or increase and decrease them by draging the range below to left or right<br> What is wrong in my code?
</p>
</div>
<input type="range" min="10" max="100" id="slider"
onchange="changeSizeBySlider()" value="40" />
</center>
<script>
var cont = document.getElementById("container");
function changeSizeByBtn(size) {
// Set value of the parameter as fontSize
cont.style.fontSize = size;
}
function changeSizeBySlider() {
var slider = document.getElementById("slider");
// Set slider value as fontSize
cont.style.fontSize = slider.value;
}
</script>
uj5u.com熱心網友回復：
確保在設定后添加單位fontSize（像素、字符、em、rem 等）。隨意運行下面的代碼段。
var cont = document.getElementById("container");
function changeSizeByBtn(size) {
// Set value of the parameter as fontSize
cont.style.fontSize = size "px"; // <- HERE
}
function changeSizeBySlider() {
var slider = document.getElementById("slider");
// Set slider value as fontSize
cont.style.fontSize = slider.value "px"; // <- HERE
}<body>
<center>
<button type="button" onclick="changeSizeByBtn(15)" name="btn1">
-A
</button>
<button type="button" onclick="changeSizeByBtn(20)" name="btn2">
A
</button>
<button type="button" onclick="changeSizeByBtn(25)" name="btn3">
A
</button>
<br /><br />
<div
style="
padding: 20px;
margin: 50px;
font-size: 20px;
border: 5px solid red;
"
id="container"
class="container"
>
<p>
I need to increase this texts here by clicking on A button and decrease
them by clicking -A button above.<br />
Or increase and decrease them by draging the range below to left or
right<br />
What is wrong in my code?
</p>
</div>
<input
type="range"
min="10"
max="100"
id="slider"
onchange="changeSizeBySlider()"
value="40"
/>
</center>
</body>uj5u.com熱心網友回復：
首先我建議你不要混合代碼，在html檔案中只有html。為此，您可以<link rel="stylesheet" href="style.css"/>在標題中添加以添加注入 css 代碼，并<script src="script.js"></script>在正文末尾添加以注入 javascript 代碼（引號中是檔案的路徑和名稱）
現在，您唯一的錯誤是要修改字體，必須添加字體單元型別，無論是px, rem, em, 等等...
我把你的代碼與 html、css 和 javaScript 分開的情況留在這里。此外，buttons您可以value為每個添加一個button并稍后使用它來更改字體大小。
最后，不要使用，<center>因為它已被棄用。而是使用 div 作為容器并添加text-align: center或任何其他型別的形狀以使您的內容居中。中心已棄用 MDN Web Docs
let cont;
function loadEvents() {
cont = document.getElementById("container");
let slider = document.getElementById("slider");
slider.addEventListener("change", () => {
changeSize(slider.value);
});
let btns = document.getElementsByClassName("btn");
for (const btn of btns) {
btn.addEventListener("click", () => {
changeSize(btn.value);
});
}
}
function changeSize(size) {
cont.style.fontSize = `${size}px`;
}
// Load the events after loading the DOM elements
addEventListener("DOMContentLoaded", loadEvents);.primary-container {
text-align: center;
}
.container {
padding: 20px;
margin: 50px;
font-size: 20px;
border: 5px solid red;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<title>Hello, world!</title>
</head>
<body>
<div class="primary-container">
<button type="button" class="btn" value="15">-A</button>
<button type="button" class="btn" value="20">A</button>
<button type="button" class="btn" value="25">A </button>
<br /><br />
<div id="container" class="container">
<p>
I need to increase this texts here by clicking on A button and decrease them by clicking -A button
above.<br />
Or increase and decrease them by draging the range below to left or right<br />
What is wrong in my code?
</p>
</div>
<input type="range" min="10" max="100" id="slider" value="40" />
</div>
<script src="script.js"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/406985.html
標籤：
下一篇：參考的反應影像元素