資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 更改文字的字型粗細？
使用 JavaScript 是更改網頁上任何文字字型粗細的最常用方法之一。我們可以使用 JavaScript 和 HTML 元素構建互動式應用程式。字型粗細指的是字元的粗細程度。在本文中，我們將瞭解如何使用 JavaScript 更改文字的字型粗細。
使用 Style fontWeight 屬性
讓我們看看如何更改單個元素（例如段落或標題）的字型粗細。為此，我們將使用元素的“style.fontWeight”屬性。此屬性是一個物件，包含所有 CSS 屬性及其對應值。
語法
我們可以使用以下語法更改文字的字型粗細：
document.getElementById("myId").style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"
在這裡，我們可以將“normal”（正常），“lighter”（更細），“bold”（粗體），“bolder”（更粗）或 100 到 900 之間的數值分配給 fontWeight 屬性。
因此，我們可以透過兩種方式為 fontWeight 屬性賦值，即數字和關鍵詞。
示例：將數字分配給 fontWeight 屬性
要使用此方法更改 HTML 元素的字型粗細，則數字應設定為 100 到 900 之間。讓我們看一個使用數字更改標題元素字型粗細的示例。
<html>
<body>
<h2 id="myHeading">Change Font Weight of HTML Element in JavaScript</h2>
<button onclick="myfuction()">Click to change font weight to 300</button>
<script>
function myfuction(){
const heading = document.getElementById("myHeading");
heading.style.fontWeight = 300;
}
</script>
</body>
</html>
如示例所示，這裡我們使用 getElementById 方法選擇 ID 為“myHeading”的標題元素，然後將物件的字型粗細屬性設定為 300，這將使標題元素的文字比正常文字更細。
示例：將關鍵詞分配給 fontWeight 屬性
要使用此方法更改 HTML 元素的字型粗細，則可以使用normal（正常），bold（粗體）或 bolder（更粗）。將字型粗細設定為 normal 等效於將字型粗細設定為 400，將字型粗細設定為 bold 等效於將字型粗細設定為 700。
<html>
<body>
<div id="myDiv">
<p id="myParagraph">
Change Font Weight of HTML Element using
keywords Method
</p>
</div>
<button onclick="myfuction()">Click to change font weight to bolder</button>
<script>
function myfuction(){
const paragraph = document.getElementById("myParagraph");
paragraph.style.fontWeight = "bolder";
}
</script>
</body>
</html>
如示例所示，這裡我們使用 getElementById 方法選擇 ID 為“myParagraph”的段落元素，然後將物件的字型粗細屬性設定為“bolder”，這將使段落元素的文字比之前更粗。
更改多個元素的字型粗細
假設您想一次更改多個元素的字型粗細，例如文件中的所有段落，則可以使用“querySelectorAll”方法。它會返回與給定 CSS 選擇器匹配的所有 HTML 元素的節點列表。
示例：使用 forEach 方法
讓我們看一個示例，使用 forEach 方法更改文件中所有段落元素的字型粗細。
<html>
<body>
<div id="myDiv">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
paragraph.style.fontWeight = 700;
});
}
</script>
</body>
</html>
在上面的示例中，我們使用“querySelectorAll”選擇 HTML 文件中所有段落元素。然後，我們使用節點列表的 forEach 方法遍歷所有段落並將其字型粗細設定為 700。
“forEach”方法是遍歷節點列表的一種有用方法。它允許我們對列表中的每個元素執行一個函式。在本例中，我們為每個段落元素的 style 物件的“fontWeight”屬性設定為 700。
示例：使用 for-of 迴圈方法
讓我們再看一個示例，使用 for-of 迴圈方法更改文件中多個元素的字型粗細。for-of 迴圈是遍歷節點列表的傳統方法或另一種方法。
<html>
<body>
<h3>Example of Font-Weight Text Changing for-of method</h3>
<div id="myDiv">
<p>First Paragraph </p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
for (const paragraph of paragraphs) {
paragraph.style.fontWeight = 700;
}
}
</script>
</body>
</html>
在此示例中，我們使用“for-of”迴圈遍歷段落並將其字型粗細設定為 700。for 迴圈和 for-of 迴圈之間的區別在於，for-of 迴圈允許我們直接訪問節點列表的元素，而在 for 迴圈中，我們訪問其索引。
結論
在本文中，我們成功地演示瞭如何更改文字的字型粗細以及示例。在這裡，我們看到了使用 JavaScript 更改單個元素和多個元素字型粗細的不同示例。對於多個元素，我們使用 forEach 方法和 for-of 方法編寫了兩個不同的示例。
950 次檢視
