JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<div>
    <p>The submit button should have a yellow background and a height of 50px. Note this does not work with firefox</p>
<input type=text>
<input type="submit" id="parentsubm" />
</div>
    
    <p>this is our helper iframe that contains a submit button without styles applied. This can be invisible</p>
<iframe id="myiframe"></iframe>

CSS

div{
    
    color:blue;
}

input{
    
    background-color:yellow;
    height:50px;
    
}

JavaScript

$('#myiframe').contents().find('html').html('<html><head></head><body><input type="submit" id="iframesubm"  /></body></html>');


var elem1 = document.getElementById("parentsubm");
var style1 = window.getComputedStyle(elem1, null);

var iframe = document.getElementById('myiframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var elem2 = innerDoc.getElementById("iframesubm");
var style2 = window.getComputedStyle(elem2, null);



for(k in style1){
    if(style1[k] !==style2[k] && k.indexOf('-') <= 0 && !isFunction(style1[k]) ){
        console.log(k +' : parent-> '+style1[k]+' iframe-> '+style2[k]);
        elem1.style[k]=style2[k];

    }  
}

function isFunction(functionToCheck) {
 var getType = {};
 return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}