javascript - ejemplos - Anulando! Importante estilo

innerhtml

Question

El título lo resume bastante bien.

La hoja de estilo externa tiene el siguiente código:

td.EvenRow a{
display: none !important;
}

He intentado usar:

element.style.display = "inline";

y

element.style.display = "inline !important";

pero ninguno funciona. ¿Es posible anular un estilo importante utilizando JavaScript?

Esto es para una extensión de greasemonkey, si eso hace la diferencia.

Answer 1

Basándose en la excelente respuesta de @ Premasagar; si no desea eliminar todos los otros estilos en línea, use esto

//accepts the hyphenated versions (i.e. not ''cssFloat'')
addStyle(element, property, value, important) {
//remove previously defined property
if (element.style.setProperty)
element.style.setProperty(property, '''');
else
element.style.setAttribute(property, '''');
//insert the new style with all the old rules
element.setAttribute(''style'', element.style.cssText +
property + '':'' + value + ((important) ? '' !important'' : '''') + '';'');
}

_{No se puede usar removeProperty() porque no eliminará reglas !important en Chrome.
No se puede usar element.style[property] = '''' porque solo acepta camelCase en FireFox.}

Answer 2

Creo que la única manera de hacerlo es agregar el estilo como una nueva declaración de CSS con el sufijo ''! Important''. La forma más sencilla de hacerlo es agregar un nuevo elemento <style> al encabezado del documento:

function addNewStyle(newStyle) {
var styleElement = document.getElementById(''styles_js'');
if (!styleElement) {
styleElement = document.createElement(''style'');
styleElement.type = ''text/css'';
styleElement.id = ''styles_js'';
document.getElementsByTagName(''head'')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle(''td.EvenRow a {display:inline !important;}'')

Las reglas agregadas con el método anterior (si usa el sufijo!) Anularán otro estilo establecido anteriormente. Si no está usando el sufijo, asegúrese de tener en cuenta conceptos como '' specificity ''.

Answer 3

Debajo hay un fragmento de código para establecer el parámetro importante para el atributo de estilo usando jquery.

$.fn.setFixedStyle = function(styles){
var s = $(this).attr("style");
s = "{"+s.replace(/;/g,",").replace(/''|"/g,"");
s = s.substring(0,s.length-1)+"}";
s = s.replace(/,/g,"/",/"").replace(/{/g,"{/"").replace(/}/g,"/"}").replace(/:/g,"/":/"");
var stOb = JSON.parse(s),st;
if(!styles){
$.each(stOb,function(k,v){
stOb[k] +=" !important";
});
}
else{
$.each(styles,function(k,v){
if(v.length>0){
stOb[k] = v+" !important";
}else{
stOb[k] += " !important";
}
});
}
var ns = JSON.stringify(stOb);
$(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};

El uso es bastante simple. Simplemente pase un objeto que contenga todos los atributos que quiera establecer como importantes.

$("#i1").setFixedStyle({"width":"50px","height":""});

Hay dos opciones adicionales.

1.Para agregar un parámetro importante al atributo de estilo ya presente pase la cadena vacía.

2. Para agregar un parámetro importante para todos los atributos presentes, no pase nada. Establecerá todos los atributos como importantes.

Aquí está vivo en acción. http://codepen.io/agaase/pen/nkvjr

Answer 4

En lugar de inyectar estilo, si se inyecta una clase (por ejemplo: ''show'') a través de script java, funcionará. Pero aquí necesitas css como a continuación. la regla de css de clase agregada debe estar por debajo de su regla original.

td.EvenRow a{
display: none !important;
}
td.EvenRow a.show{
display: block !important;
}

Answer 5

Hay un par de frases sencillas que puedes usar para hacer esto.

1) Establezca un atributo de "estilo" en el elemento:

element.setAttribute(''style'', ''display:inline !important'');

o...

2) Modificar la propiedad cssText del objeto de style :

element.style.cssText = ''display:inline !important'';

Cualquiera de los dos hará el trabajo.

===

Por cierto, si quieres una herramienta útil para manipular reglas !important en elementos, he escrito un complemento jQuery llamado "importante": http://github.com/premasagar/important

Answer 6

Mejor método que acabo de descubrir: trate de ser más específico que el CSS de la página con sus selectores. ¡Solo tenía que hacer esto hoy, y funciona como un encanto! Más información en el sitio W3C: specificity

Answer 7

Puedes usar:

element.style.setProperty("display", "inline", "important");

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

Answer 8

Si desea actualizar / agregar estilo único en el atributo de estilo de elemento DOM, puede usar esta función:

function setCssTextStyle(el, style, value) {
var result = el.style.cssText.match(new RegExp("(?:[;//s]|^)(" +
style.replace("-", "//-") + "//s*:(.*?)(;|$))")),
idx;
if (result) {
idx = result.index + result[0].indexOf(result[1]);
el.style.cssText = el.style.cssText.substring(0, idx) +
style + ": " + value + ";" +
el.style.cssText.substring(idx + result[1].length);
} else {
el.style.cssText += " " + style + ": " + value + ";";
}
}

style.cssText es compatible con todos los principales navegadores .

Ejemplo de caso de uso:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

Aquí hay un enlace a la demostración

Answer 9

Si todo lo que hace es agregar CSS a la página, le sugiero que use el complemento Elegante y escriba un estilo de usuario en lugar de un script de usuario, porque el estilo de usuario es más eficiente y apropiado.

Consulte esta página con información sobre cómo crear un estilo de usuario

Answer 10

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

usar propiedad inicial en css3

 <p style="color:red!important">
this text is red
<em style="color:initial">
this text is in the initial color (e.g. black)
</em>
this is red again
</p>

Answer 11

https://jsfiddle.net/xk6Ut/256/

Una opción para anular la clase CSS en JavaScript es usar una ID para el elemento de estilo para que podamos actualizar la clase CSS

function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement) document.getElementsByTagName(''head'')[0].removeChild(
styleElement);
styleElement = document.createElement(''style'');
styleElement.type = ''text/css'';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName(''head'')[0].appendChild(styleElement);
}

..

 var cssText = ''.testDIV{ height:'' + height + ''px !important; }'';
writeStyles(''styles_js'', cssText)

Answer 12

element.style tiene un método setProperty que puede tomar la prioridad como un tercer parámetro:

element.style.setProperty("display", "inline", "important")

No funcionó en IEs antiguos, pero debería estar bien en los navegadores actuales.