Styjun

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.

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.

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.