📅 最后修改于: 2023-12-03 15:01:12.805000 🧑 作者: Mango
在 HTML 中，我们可以通过设置样式来改变文本的样式，使其更加美观，易读。其中 fontStyle 属性可用于改变文本字体的风格（普通、斜体、倾斜等）。
在 DOM 中，我们可以使用 JavaScript 来操作和改变 HTML 页面中的元素样式，其中 fontStyle 属性也是一个可操作的属性。
在 HTML 中，fontStyle 属性可以在 style 属性中进行设置，语法如下：
<p style="font-style: normal|italic|oblique;">text</p>
在 DOM 中，可以通过 JavaScript 来设置 fontStyle 属性，语法如下：
document.getElementById("p1").style.fontStyle = "italic";
fontStyle 属性的属性值有以下三种：
normal：普通字体风格italic：斜体字体风格oblique：倾斜字体风格以下是使用 CSS 设置 fontStyle 属性的两个样例：
<!DOCTYPE html>
<html>
<head>
<title>fontStyle 属性示例</title>
<style>
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
</style>
</head>
<body>
<h1>fontStyle 属性示例</h1>
<p class="normal">这是一段普通的文本。</p>
<p class="italic">这是一段斜体的文本。</p>
<p class="oblique">这是一段倾斜的文本。</p>
</body>
</html>
以上 CSS 样式将 normal、italic、oblique 三个类应用到不同的段落中，分别使用不同的 fontStyle 属性值，得到不同的字体风格。
以下是使用 JavaScript 设置 fontStyle 属性值的样例：
<!DOCTYPE html>
<html>
<head>
<title>fontStyle 属性示例</title>
</head>
<body>
<h1>fontStyle 属性示例</h1>
<p id="p1">这是一段普通的文本。</p>
<button onclick="setItalic()">将文本变成斜体</button>
<button onclick="setOblique()">将文本变成倾斜</button>
<button onclick="setNormal()">将文本变成普通</button>
<script>
function setItalic() {
document.getElementById("p1").style.fontStyle = "italic";
}
function setOblique() {
document.getElementById("p1").style.fontStyle = "oblique";
}
function setNormal() {
document.getElementById("p1").style.fontStyle = "normal";
}
</script>
</body>
</html>
以上 JavaScript 示例中，使用三个按钮分别调用三个函数，通过 document.getElementById() 方法获取页面中的段落元素并修改其 fontStyle 属性，实现点击按钮可改变文本的字体风格的效果。
通过本文的介绍，我们了解了 fontStyle 属性的基本语法、属性值和应用场景，掌握了使用 CSS 和 JavaScript 分别设置 fontStyle 属性的方法，有助于我们更加灵活地运用该属性来改变页面中文本的风格。