How to Change Div Text to Bold in JavaScript

Written by allen bethea Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Change Div Text to Bold in JavaScript
Bold text can help draw attention to your content. (Hemera Technologies/ Images)

Sometimes you need to raise your voice to get attention. Web designers can raise a Web page's "volume" by making some of the text bolder. The Cascading Style Sheet, or CSS, font weight property can make your text lighter or darker than normal. JavaScript has access to the hypertext markup language Document Object Model, or DOM, and can change the weight of text without reloading the whole page. You can change the font weight of the text within a div tag by using "getElementById()" to set the property "" to "bold."

Skill level:

Things you need

  • Web browser such as Internet Explorer
  • Plain-text editor such as Notepad

Show MoreHide


  1. 1

    Launch the plain-text editor Notepad by clicking the "Start" button, clicking on "All Programs," "Accessories" and then clicking "Notepad."

  2. 2

    Enter the following code into the text editor.



    <script language="JavaScript">

    function change Style(){


    document.getElementById("mybutton").innerHTML="The text is Now BOLD!";





    <div id="mydiv" >The text here is Normal weight</div>

    <button id="mybutton" type="button" on Click="JavaScript:change Style()">Make the text bold</button>



  3. 3

    Click the "File" menu. Select the "Save" option. Save under the file name "test.html."

  4. 4

    Launch the Web browser by clicking the "Start" button, clicking on "All Programs" and "Internet Explorer." Click on the "File" menu item and select "Open File."

  5. 5

    Locate the file "test.html" just created, select it with the mouse and then click on "Open."

  6. 6

    Click on button labelled "Make the text bold." The text should become bold and the button should now read: "The text is Now BOLD!"

Tips and warnings

  • The DOM's innerHTML property allows you to change Web page text without reloading the entire page. You could use this feature to change the text in a div when the user's mouse passes over it. You can add the following code to the "change Style()" function in the example and change the div text:
  • document.getElementById("mydiv").innerHTML="The text font weight in this div is now BOLD!";
  • Change the button code to use the following mouseover function:
  • Make the text bold
  • When used judiciously, bold fonts help attract attention to important content on your page. Too much bold type on a page, however, may be seen by your viewer as shouting or badgering. Limit your use of bold type. Separate chunks of bold type by white space. Varying the font colour or font-family may help draw the viewers eye toward important information as well

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.