How to change font size of sub child element using javascript

Question

I have html like below

<span id="3072" style="position: relative; display: inline-block; width: 1898px; height: 194px; ">
     <div style="visibility: visible; text-align: center; position: absolute; top: 90.5px; width: 1898px;">
         <div style="font-family: Arial; font-size: 8.25pt; font-style: normal;>
         </div>
     </div>
</span>

here I want to change font-size:8.25pt to 14pt from the last div tag, how do I access contents of the last div tag using id from span tag.

I can easily change the contents of the 1st div tag something like below

document.getElementById("3072").firstChild.fontize="14px";

But in this case the Div tags doesn't have any classes or Id's to access them.

Anyone has any thoughts on this please share.

Image attached which shows the code of the html.

Thanks.

you are missing a " at the end of the style attribute of the second div. — Kevin Kloet, Dec 16 '16 at 15:57
native javascript solution: [queryselector](https://developer.mozilla.org/docs/Web/API/Document/querySelector) — Kevin Kloet, Dec 16 '16 at 15:59

score 1 · Accepted Answer · edited May 23 '17 at 12:00

The easiest way is to add a class or id directly to your target element, but if you can not change the markup then you can use:-

use querySelector

document.querySelector('[id="3072"]>div>div').style['font-size'] = '14px';

<span id="3072" style="position: relative; display: inline-block; width: 1898px; height: 194px; ">
     <div style="visibility: visible; text-align: center; position: absolute; top: 90.5px; width: 1898px;">
         <div style="font-family: Arial; font-size: 8.25pt; font-style: normal;">
           14px
         </div>
     </div>
</span>

or jQuery

$('#3072>div>div').css('font-size', '14px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="3072" style="position: relative; display: inline-block; width: 1898px; height: 194px; ">
  <div style="visibility: visible; text-align: center; position: absolute; top: 90.5px; width: 1898px;">
    <div style="font-family: Arial; font-size: 8.25pt; font-style: normal;">
      14px
    </div>
  </div>
</span>

Note: see here about using numbers as id's.

May I know how to add class to directly to the target element. — rahulS, Dec 16 '16 at 16:23

How to change font size of sub child element using javascript

1 Answers1

Linked