Javascript Reference - HTML DOM Style fontWeight Property

The fontWeight property sets or gets font boldness.

Browser Support


`fontWeight`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the fontWeight property:

var v = object.style.fontWeight

Set the fontWeight property:

object.style.fontWeight='normal|lighter|bold|bolder|value|initial|inherit'

Property Values

Value	Description
normal	Default. normal font.
lighter	lighter font
bold	bold font
bolder	bolder font
100 200 300 400 500 600 700 800 900	Set font weight from light to bold characters. 400 is the same as normal, and 700 is the same as bold
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing the font weight
CSS Version	CSS1

Example

The following code shows how to set the font weight "900".


<!DOCTYPE html>
<html>
<body>
<p id="myP">This is a paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {<!--   www .j  a va  2s.c o m-->
    document.getElementById("myP").style.fontWeight = "900";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

A demonstration of various possible values for font weight.


<!DOCTYPE html>
<html>
<body>
<!-- w w  w  .j a v a 2  s  .c om-->
<p id="myP">This is a paragraph.</p>

<select onchange="myFunction(this);" size="13">
  <option>normal</option>
  <option>bold</option>
  <option>bolder</option>
  <option>lighter</option>
  <option>100</option>
  <option>200</option>
  <option>300</option>
  <option>400</option>
  <option>500</option>
  <option>600</option>
  <option>700</option>
  <option>800</option>
  <option>900</option>
</select>
 
<script>
function myFunction(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("myP").style.fontWeight = listValue;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the font weight.


<!DOCTYPE html>
<html>
<body>
<!--from   ww w. j a  va2s  .  co  m-->
<p id="myP" style="font-weight:bold">This is a paragraph.</p>

<button type="button" onclick="myFunction()">test</button>
 
<script>
function myFunction() {
    console.log(document.getElementById("myP").style.fontWeight);
}
</script>

</body>
</html>

The code above is rendered as follows: