Override stili inline aggiunti tramite JS CSS

Question

un JS plugin è per esprimere uno stile che mi sta dando un po 'di mal di testa:

element.style { 
    z-index: 100 !important; 
} 

così ho provato questo:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox  
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView 
div.janrainHeader[style] { 
    z-index: 1 !important; 
} 

e ancora niente.

Answer 1

Contrariamente alle altre risposte, è possibile ignorare gli stili inline con i CSS:

http://css-tricks.com/override-inline-styles-with-css/

direi che la lunghissima selettore non potrebbe colpire l'elemento.

Ho avuto un simile problema di z-index con il plugin Janrain che è stato risolto da questo:

#janrainEngageEmbed > div[style] { 
    z-index: 0; 
} 

Nel tuo caso, hai probabilmente bisogno:

z-index: 0 !important; 

Answer 2

Lo stile in linea salterà tutti i selettori. O resettate lo stile da soli in javascript o applicate il plug-in ... non sembra particolarmente scritto, a dire il vero. :)

Answer 3

lo stile in linea sostituisce sempre i css esterni e interni, oltre al fatto che il plug-in utilizza la clausola !important (pratica molto cattiva!), Tutti insieme rende impossibile risolverlo solo con css. Suppongo che dovrai usare alcuni js personalizzati per sovrascrivere le impostazioni del plugin.

forse il modo migliore sarebbe verificare se è possibile specificare una funzione di callback con il plugin e impostare lo stile come si desidera. un'altra risposta qui suggerita di modificare il plugin stesso, che è bello se non si pianifica di aggiornarlo mai, altrimenti è meglio lasciare il codice del plugin così com'è e aggiungere semplicemente alcuni js personalizzati di