fontWeight属性用于设置或返回单词中粗字符或细字符的显示方式。
用法:
- 它返回fontWeight属性。
object.style.fontWeight
- 它设置fontWeight属性。
object.style.fontWeight = "normal|lighter|bold|bolder|value| initial|inherit"
属性值:
值 | 描述 |
---|---|
normal | 字体的默认值 |
lighter | 比normal细 |
bold | 比normal粗 |
bolder | 比bold更粗 |
value | 定义从100到900,其中400是正常值 |
initial | 设为默认值 |
inherit | 从父元素继承属性 |
返回值:返回字符串字体的粗体。
示例1:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<!-- Property for p tag. -->
<p style="color:green;
width:100%;
font-size:30px;
font-weight:bold;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set property for "p" tag form
// 'bold' to 'lighter'.
document.getElementById(
"sudo").style.fontWeight = "lighter";
}
</script>
</center>
</body>
</html>
输出:
- 在点击按钮之前:
- 单击按钮后:
示例2:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<p style="color:green;
width:100%;
font-size:30px;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set property from normal to bold.
document.getElementById(
"sudo").style.fontWeight = "bold";
}
</script>
</center>
</body>
</html>
输出:
- 在点击按钮之前:
- 单击按钮后:
示例3:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<p style="color:green;
width:100%;
font-size:30px;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set property bolder.
document.getElementById(
"sudo").style.fontWeight = "bolder";
}
</script>
</center>
</body>
</html>
输出:
- 在点击按钮之前:
- 单击按钮后:
示例4:
<!DOCTYPE html>
<html>
<head>
<title>DOM Style fontWeight Property </title>
</head>
<body>
<center>
<p style="color:green;
width:100%;
font-size:30px;"
id="sudo">
GeeksForGeeks
</p>
<h2>DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Click to change
</button>
<script>
function myGeeks() {
// Set font using values.
document.getElementById(
"sudo").style.fontWeight = "1000";
}
</script>
</center>
</body>
</html>
输出:
- 在点击按钮之前:
- 单击按钮后:
支持的浏览器:HTML | DOM样式fontWeight属性在下面列出:
- 谷歌浏览器
- IE浏览器
- 火狐浏览器
- Opera
- Safari
相关用法
- HTML Style right用法及代码示例
- HTML Style top用法及代码示例
- HTML Style borderTopColor用法及代码示例
- HTML Style borderWidth用法及代码示例
- HTML Style letterSpacing用法及代码示例
- HTML Style left用法及代码示例
- HTML Style alignItems用法及代码示例
- HTML Style border用法及代码示例
- HTML Style emptyCells用法及代码示例
- HTML Style outlineColor用法及代码示例
- HTML Style minHeight用法及代码示例
- HTML Style fontFamily用法及代码示例
- HTML Style listStylePosition用法及代码示例
- HTML Style font用法及代码示例
- HTML Style justifyContent用法及代码示例
注:本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Style fontWeight Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。