Estoy creando un sitio que usa un widget de JavaScript para incrustar un formulario simple en la página:
<script src="//example.com/formWidget.js?id=1234"></script> Esto luego inyecta el formulario HTML directamente en la página para que podamos diseñarlo para que se adapte al sitio. Sin embargo, la persona que creó el formulario incluyó muchos estilos en línea que anulan el CSS del sitio. No quiero hacer que todas las reglas de CSS sean !important porque eso suele ser una mala idea ; y es importante tener en cuenta que el estilo en línea NO se realiza por elemento (por ejemplo <span style="border: 1px solid red;"> , que se resuelve en preguntas como esta ); pero como un bloque <style> que se inyecta en la página junto con el HTML:
<style> .widget-form button { border: 1px solid red; float: left; } .widget-form input { background: green; } </style> El bloque de style no tiene una ID a la que pueda apuntar selectivamente, entonces, ¿cómo puedo eliminar este bloque de estilo en línea inyectado? Estoy bien usando JS/jQuery para resolverlo, ya que así es como se agrega el widget.
Siempre que el bloque <style> contenga algo identificable de forma única, entonces es relativamente fácil de eliminar. Usando jQuery para recorrer todos los bloques <style> en la página, luego puede verificar su contenido para el selector infractor y eliminar el bloque completo:
$('style').each(function(index, elem) { let styleBlock = $(this); let content = styleBlock.text(); if (content.indexOf('.widget-form') > -1) { // Found an inline style block - let's kill it! styleBlock.remove(); } });También puede hacer esto de una manera muy similar con JS simple:
var styles = document.querySelectorAll('style'); Array.prototype.forEach.call(styles, function(el, i) { let content = el.textContent; if (content.indexOf('.widget-form') > -1) { // Found an inline style block - let's kill it! el.remove(); // Or el.parentNode.removeChild(el); for maximum backwards compatibility } });solo ponlo en tu archivo css
.widget-form button { border: unset; float: unset; } .widget-form input { background: unset; }agregue !importante si es necesario
entonces prueba esto
$( "<html>*/</html>" ).appendTo( "style:last-of-type" ); $( "<html>/*</html>" ).prependTo( "style:last-of-type" );el selector cambia según su archivo de índice