javascript - pagina - ¿Cómo aplicar! Importante usando.css()?
javascript tutorial (30)
Tres ejemplos de trabajo
Tuve una situación similar, pero usé .find () después de luchar con .closest () durante mucho tiempo con muchas variaciones.
El código de ejemplo
// Allows contain functions to work, ignores case sensitivity
jQuery.expr['':''].contains = function(obj, index, meta, stack) {
result = false;
theList = meta[3].split("'',''");
var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '''')
for (x=0; x<theList.length; x++) {
if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
return true;
}
}
return false;
};
$(document).ready(function() {
var refreshId = setInterval( function() {
$("#out:contains(''foo'', ''test456'')").find(".inner").css(''width'', ''50px'', ''important'');
}, 1000); // Rescans every 1000 ms
});
Alternativa
$(''.inner'').each(function () {
this.style.setProperty(''height'', ''50px'', ''important'');
});
$(''#out'').find(''.inner'').css({ ''height'': ''50px''});
Trabajando: http://jsfiddle.net/fx4mbp6c/
Estoy teniendo problemas para aplicar un estilo que es !important . He intentado:
$("#elem").css("width", "100px !important");
Esto no hace nada ; No se aplica ningún estilo de ancho. ¿Existe una forma jQuery-ish de aplicar un estilo de este tipo sin tener que sobrescribir cssText (lo que significaría que tendría que analizarlo primero, etc.)?
Edición : Debo agregar que tengo una hoja de estilo con un estilo !important que intento anular con un estilo !important línea, por lo que usar .width() y similares no funciona, ya que mi estilo externo lo .width() !important .
Además, se calcula el valor que anulará el valor anterior, por lo que no puedo simplemente crear otro estilo externo.
Creo que funciona bien y puede sobrescribir cualquier otro CSS antes (este: elemento DOM):
this.setAttribute(''style'', ''padding:2px !important'');
Creo que he encontrado una solución real. Lo he hecho en una nueva función:
jQuery.style(name, value, priority);
Puede usarlo para obtener valores con .style(''name'') como .css(''name'') , obtener CSSStyleDeclaration con .style() y también establecer valores, con la capacidad de especificar la prioridad como ''importante'' . Ver this
Manifestación
var div = $(''someDiv'');
console.log(div.style(''color''));
div.style(''color'', ''red'');
console.log(div.style(''color''));
div.style(''color'', ''blue'', ''important'');
console.log(div.style(''color''));
console.log(div.style().getPropertyPriority(''color''));
Aquí está la salida:
null
red
blue
important
La función
(function($) {
if ($.fn.style) {
return;
}
// Escape regex chars with /
var escape = function(text) {
return text.replace(/[-[/]{}()*+?.,//^$|#/s]/g, "//$&");
};
// For those who need them (< IE 9), add support for CSS functions
var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
if (!isStyleFuncSupported) {
CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
return this.getAttribute(a);
};
CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
this.setAttribute(styleName, value);
var priority = typeof priority != ''undefined'' ? priority : '''';
if (priority != '''') {
// Add priority manually
var rule = new RegExp(escape(styleName) + ''//s*://s*'' + escape(value) +
''(//s*;)?'', ''gmi'');
this.cssText =
this.cssText.replace(rule, styleName + '': '' + value + '' !'' + priority + '';'');
}
};
CSSStyleDeclaration.prototype.removeProperty = function(a) {
return this.removeAttribute(a);
};
CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
var rule = new RegExp(escape(styleName) + ''//s*://s*[^//s]*//s*!important(//s*;)?'',
''gmi'');
return rule.test(this.cssText) ? ''important'' : '''';
}
}
// The style function
$.fn.style = function(styleName, value, priority) {
// DOM node
var node = this.get(0);
// Ensure we have a DOM node
if (typeof node == ''undefined'') {
return this;
}
// CSSStyleDeclaration
var style = this.get(0).style;
// Getter/Setter
if (typeof styleName != ''undefined'') {
if (typeof value != ''undefined'') {
// Set style property
priority = typeof priority != ''undefined'' ? priority : '''';
style.setProperty(styleName, value, priority);
return this;
} else {
// Get style property
return style.getPropertyValue(styleName);
}
} else {
// Get CSSStyleDeclaration
return style;
}
};
})(jQuery);
Vea this para ver ejemplos de cómo leer y configurar los valores de CSS. Mi problema fue que ya había establecido !important para el ancho en mi CSS para evitar conflictos con otros temas del CSS, pero cualquier cambio que hice en el ancho en jQuery no se vería afectado ya que se agregarían al atributo de estilo.
Compatibilidad
Para establecer con la prioridad el uso de la función setProperty , este artículo dice que hay soporte para IE 9+ y para todos los demás navegadores. He intentado con IE 8 y ha fallado, por lo que he creado soporte para él en mis funciones (ver más arriba). Funcionará en todos los demás navegadores usando setProperty, pero necesitará mi código personalizado para funcionar en <IE 9.
Después de leer otras respuestas y experimentar, esto es lo que funciona para mí:
$(".selector")[0].style.setProperty( ''style'', ''value'', ''important'' );
Sin embargo, esto no funciona en IE 8 y menores.
El problema se debe a que jQuery no comprende el atributo !important y, como tal, no aplica la regla.
Es posible que pueda evitar ese problema y aplicar la regla refiriéndose a él, a través de addClass() :
.importantRule { width: 100px !important; }
$(''#elem'').addClass(''importantRule'');
O utilizando attr() :
$(''#elem'').attr(''style'', ''width: 100px !important'');
Sin embargo, este último enfoque anularía cualquier regla de estilo en línea previamente establecida. Así que úsalo con cuidado.
Por supuesto, hay un buen argumento de que el método de @Nick Craver es más fácil / más sabio.
El enfoque attr() se modificó ligeramente para conservar la cadena / propiedades del style original:
$(''#elem'').attr(''style'', function(i,s) { return s + ''width: 100px !important;'' });
En lugar de usar la función css() , intente la función addClass() :
<script>
$(document).ready(function() {
$("#example").addClass("exampleClass");
});
</script>
<style>
.exampleClass{
width:100% !important;
height:100% !important;
}
</style>
Esta solución dejará todo el javascript calculado y agregará la etiqueta importante al elemento: puede hacerlo (Ex, si necesita establecer el ancho con la etiqueta importante)
$(''exampleDiv'').css(''width'', '''');
//This will remove the width of the item
var styles = $(''exampleDiv'').attr(''style'');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += ''width: 200px !important;''
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$(''exampleDiv'').attr(''style'', styles);
//This will add all previous styles to your item
Esta solución no anula ninguno de los estilos anteriores, solo aplica el que necesita:
var heightStyle = "height: 500px !important";
if ($("foo").attr(''style'')) {
$("foo").attr(''style'', heightStyle + $("foo").attr(''style'').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''''));
else {
$("foo").attr(''style'', heightStyle);
}
Esto es lo que hice después de encontrar este problema ...
var origStyleContent = jQuery(''#logo-example'').attr(''style'');
jQuery(''#logo-example'').attr(''style'', origStyleContent + '';width:150px !important'');
Hazlo asi:
$("#elem").get(0).style.width= "100px!important";
La solución más fácil y mejor para este problema fue simplemente usar addClass () en lugar de .css () o .attr ().
Por ejemplo:
$(''#elem'').addClass(''importantClass'');
Y en tu archivo CSS:
.importantClass {
width: 100px !important;
}
La solución más segura a esto es agregar una clase y luego hacer la magia en CSS :-), addClass() y removeClass() deben hacer el trabajo.
No hay necesidad de ir a la complejidad de la respuesta de @ AramKocharyan, ni la necesidad de insertar etiquetas de estilo dinámicamente.
Solo sobrescribe el estilo, pero no tienes que analizar nada, ¿por qué lo harías?
// Accepts the hyphenated versions (i.e. not ''cssFloat'')
function 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á !important reglas !important de Chrome.
No se puede usar element.style[property] = '''' , porque solo acepta camelCase en Firefox.
Probablemente podrías hacer esto más corto con jQuery, pero esta función de vainilla se ejecutará en navegadores modernos, Internet Explorer 8, etc.
Otro método fácil para resolver este problema agregando el atributo de estilo:
$(''.selector'').attr(''style'', ''width:500px !important'');
Para tu información, no funciona porque jQuery no lo admite. Hubo un boleto registrado en 2012 ( # 11173 $ (elem) .css ("propiedad", "valor! Importante") falla ) que finalmente se cerró como WONTFIX.
Podemos usar setProperty o cssText para agregar !important para un elemento DOM usando JavaScript.
Ejemplo 1:
elem.style.setProperty ("color", "green", "important");
Ejemplo 2:
elem.style.cssText=''color: red !important;''
Primero necesitamos eliminar el estilo anterior. Lo quito usando una expresión regular. Aquí hay un ejemplo para cambiar de color:
var SetCssColorImportant = function (jDom, color) {
var style = jDom.attr(''style'');
style = style.replace(/color: .* !important;/g, '''');
jDom.css(''cssText'', ''color: '' + color + '' !important;'' + style); }
Puede establecer el ancho directamente usando .width() siguiente manera:
$("#elem").width(100);
Actualizado para comentarios: también tiene esta opción, pero reemplazará todos los css en el elemento, así que no estoy seguro de que sea más viable:
$(''#elem'').css(''cssText'', ''width: 100px !important'');
Puede o no ser apropiado para su situación, pero puede usar los selectores de CSS para muchas de estas situaciones.
Si, por ejemplo, quisiera que la tercera y la sexta instancia de .cssText tuvieran un ancho diferente, podría escribir:
.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}
O:
.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}
Puede ser que se vea así:
Cache
var node = $(''.selector'')[0]; OR var node = document.querySelector(''.selector'');
Establecer CSS
node.style.setProperty(''width'', ''100px'', ''important'');
Eliminar CSS
node.style.removeProperty(''width''); OR node.style.width = '''';
Puedes hacerlo:
$("#elem").css("cssText", "width: 100px !important;");
Usando "cssText" como el nombre de la propiedad y lo que quieras agregar al CSS como su valor.
Puedes lograr esto de dos maneras:
$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");
Si no es tan relevante y ya que estás tratando con un elemento que es #elem , puedes cambiar su id a otra cosa y #elem como desees ...
$(''#elem'').attr(''id'', ''cheaterId'');
Y en tu CSS:
#cheaterId { width: 100px;}
Supongo que lo intentaste sin agregar !important ¿ !important ?
El CSS en línea (que es la forma en que JavaScript agrega estilo) anula el CSS de la hoja de estilo. Estoy bastante seguro de que ese es el caso, incluso cuando la regla CSS de la hoja de estilo ha sido !important .
Otra pregunta (tal vez una pregunta estúpida, pero debe hacerse): es el elemento que está intentando trabajar en la display:block; o display:inline-block; ?
Sin conocer su experiencia en CSS ... los elementos en línea no siempre se comportan como usted esperaría.
También descubrí que ciertos elementos o complementos (como Bootstrap) tienen algunos casos de clases especiales en los que no juegan bien !important U otros .addClass/.removeClass alternativos como .addClass/.removeClass , y por lo tanto, tienes que .addClass/.removeClass / apagado.
Por ejemplo, si usa algo como <table class="table-hover"> la única forma de modificar con éxito los elementos como los colores de las filas es activar / desactivar la clase table-hover , de esta manera
$(your_element).closest("table").toggleClass("table-hover");
¡Ojalá este trabajo sea útil para alguien! :)
Tuve el mismo problema al intentar cambiar el color del texto de un elemento de menú cuando "evento". La mejor manera que encontré cuando tuve este mismo problema fue:
Primer paso: cree, en su CSS, una nueva clase con este propósito, por ejemplo:
.colorw{ color: white !important;}
Último paso: aplique esta clase usando el método addClass de la siguiente manera:
$(''.menu-item>a'').addClass(''colorw'');
Problema resuelto.
Una forma alternativa de añadir estilo en la cabeza:
$(''head'').append(''<style> #elm{width:150px !important} </style>'');
Esto añade estilo después de todos sus archivos CSS, por lo que tendrá mayor prioridad que otros archivos CSS y se aplicará.
https://jsfiddle.net/xk6Ut/256/
Un enfoque alternativo es crear y actualizar dinámicamente la clase CSS en JavaScript. Para hacer eso, podemos usar el elemento de estilo y necesitamos usar la ID para el elemento de estilo para poder 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)
La respuesta de David Thomas describe una forma de usar $(''#elem'').attr(''style'', …) , pero advierte que al usarlo se eliminarán los estilos establecidos previamente en el atributo de style . Aquí hay una forma de usar attr() sin ese problema:
var $elem = $(''#elem'');
$elem.attr(''style'', $elem.attr(''style'') + ''; '' + ''width: 100px !important'');
Como una función:
function addStyleAttribute($element, styleAttribute) {
$element.attr(''style'', $element.attr(''style'') + ''; '' + styleAttribute);
}
addStyleAttribute($(''#elem''), ''width: 100px !important'');
Aquí hay una demo de JS Bin .
var elem = $("#elem");
elem[0].style.removeAttribute(''width'');
elem[0].style.setProperty(''width'', ''100px'', ''important'');