• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

223
Vistas
Add Custom Style In Iframe using jQuery

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. enter image description here

almost 3 years ago · Santiago Trujillo
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda