数据结构
网络
关系数据库管理系统
操作系统
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 次查看
