Set the font for a <p> element:
document.getElementById("myP").style.font = "italic bold 20px arial,serif";
<!DOCTYPE html> <html> <body> <p id="myP">This is a paragraph.</p> <button type="button" onclick="myFunction()">Set font</button> <script> function myFunction() {/*from www . ja va2s .co m*/ document.getElementById("myP").style.font = "italic bold 20px arial,serif"; } </script> </body> </html>
The font property sets or gets up to six separate font properties, in a shorthand form.
With this property, you can set/get the following:
The font-size and font-family are required.
If one of the other values are missing, the default values will be inserted, if any.
Property Values
| Value | Description |
|---|---|
| style | the font-style |
| variant | the text in a small-caps font |
| weight | the boldness of the font |
| size | the size of the font |
| lineHeight | the distance between lines |
| family | the font face |
| caption | The font used for captioned controls, like buttons, drop-downs, etc. |
| icon | The font used to label icons |
| menu | The font used in menus |
| message-box | The font used in dialog boxes |
| small-caption | The font used in small controls |
| status-bar | The font used in window status bars |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
The font property returns a String representing different font properties of the element.