How to add a style to <iframe> tag using javascript when it's parent tag's id is known?

Question

How to apply a style to an iframe whose parent tag's id is known??

Example:

<div id="xyz"> 
 <iframe ....> </iframe>
</div>

I want to apply style to iframe as height: 70px. I just got to know how to do this using CSS.

How can I do that using javascript. Any help very much appreciated!

Answer 1

// grab the div and the first iframe inside it:

var iframe = document.getElementById('xyz').getElementsByTagName('iframe')[0];

// There are two different valid ways to set the height

// 1. Change the attribute like it was <iframe height="70" ... />
iframe.height = '70';

// 2. Change the attribute like it was <iframe style="height: 70px;" ... />
iframe.style.height = '70px';