How to change iframe height in javascript/jquery?

Question

I am working on a js/jquery code as shown below in which I want to override the css present in the HTML Code below.

 console.log("iframe height is", $("div.scribble-live").find("iframe").css("height")); $("div.scribble-live").find("iframe").css("height", "200px"); console.log("iframe height is", $("div.scribble-live").find("iframe").css("height")); 

 .scribble-live, .scrbbl-embed { border: thin black solid; margin: 1em; } iframe { background: orange; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="scribble-live"> <div class="scrbbl-embed"> <iframe width="100%" height="15236px" frameborder="0" class="scrbbl-embed scrbbl-event" style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;"> </iframe> </div> </div> 

Problem Statement:

The above js/jquery code doesn't seem to override the css ( style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;" ) present in the HTML code above.

Answer 1

I guess there are 2 different things what you need to do here because there are 2 places where you have height values in your generated HTML code. Because you cannot remove any of them as I understand we need to operate with these steps:

1. Attribute change

The first thing is to change the height attribute from your code with the following line of code:

$("div.scribble-live").find("iframe").attr("height", "200px");

This will change the height attribute in the following HTML as below:

<iframe width="100%" height="200px" frameborder="0"
       class="scrbbl-embed scrbbl-event"
       style="border: none; visibility: visible; width: 50px; height: 15236px; min-width: 100%;">
 </iframe>

You can read further about .attr() here .

2. Style property change

The second thing which is changing the style attribute's height value:

$("div.scribble-live").find("iframe").css("height", "200px");

By doing this the second height in the style attribute will be changed as well:

<iframe width="100%" height="200px" frameborder="0"
       class="scrbbl-embed scrbbl-event"
       style="border: none; visibility: visible; width: 50px; height: 200px; min-width: 100%;">
     </iframe>

Read more about jQuery function .css() here .

Summary

With those function calls you are changing both values. Let me share a picture which function is changing what:

Update: Just realized that you have the height 2 times in your HTML so I have updated my answer based on that.

Answer 2

For override the height prop in style attribute.

$("div.scribble-live .scrbbl-event").height("200px"); 

For override the iframe height attribute.

$("div.scribble-live .scrbbl-event").attr("height", "200px");

You have to execute both script because height prop inside style attribute will always override the iframe height attibute value.