I am using Clutch widget in my website page https://staging-outpaceseo.kinsta.cloud/services/law-firm-seo/ for some credibility. And the iframe has its pre-defined CSS that I need to override. I tried add the style tag inside the iframe using jQuery, but it is not working.
Webpage: https://staging-outpaceseo.kinsta.cloud/services/law-firm-seo/ Script:
<script>
$(document).ready(function() {
const id = $('.clutch-widget iframe').attr('id');
var iframe = document.getElementById(id);
var style = document.createElement('style');
style.textContent =
'.carousel_widget__wrapper, .carousel_widget {' +
' background: #ffffff;' +
'}'
;
console.log(id, 'id')
console.log(iframe, 'iframe')
console.log(style, 'style')
console.log(iframe.contentDocument, 'iframe.contentDocument')
// let head = iframe.contents().find('head');
// head.append(style);
iframe.contentDocument.head.appendChild(style)
});
</script>
You can check the page console to check the output of above console logs. Instead of adding the style tag to the clutch iframe, i think new iframe is being created and the style tag is added there.