javascript - setting - setar classe css jquery




Como aplicar! Importante usando.css()? (20)

Estou tendo problemas para aplicar um estilo que é !important . Eu tentei:

$("#elem").css("width", "100px !important");

Isso não faz nada ; nenhum estilo de largura é aplicado. Existe uma maneira jQuery-ish de aplicar esse estilo sem ter que substituir cssText (o que significaria que eu preciso analisá-lo primeiro, etc)?

Edit : Devo acrescentar que eu tenho uma folha de estilo com um estilo !important que eu estou tentando substituir com um !important estilo inline, portanto, usando .width() e afins não funciona, uma vez que é substituído pelo meu estilo externo !important .

Além disso, o valor que irá substituir o valor anterior é calculado , portanto, não posso simplesmente criar outro estilo externo.


Três exemplos de trabalho

Eu tive uma situação semelhante, mas usei .find () depois de lutar com .closest () por um longo tempo com muitas variações.

O exemplo de código

// 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'});

Trabalhando: http://jsfiddle.net/fx4mbp6c/


A solução mais fácil e melhor para esse problema foi simplesmente usar addClass () em vez de .css () ou .attr ().

Por exemplo:

$('#elem').addClass('importantClass');

E no seu arquivo CSS:

.importantClass {
    width: 100px !important;
}

Aqui está o que eu fiz depois de encontrar este problema ...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');

Depois de ler outras respostas e experimentar, isso é o que funciona para mim:

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

Isso não funciona no IE 8 e abaixo, no entanto.


Essa solução deixará todo o javascript computado e adicionará a tag importante no elemento: Você pode fazer (Ex se precisar definir a largura com a tag 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 solução não substitui nenhum dos estilos anteriores, apenas aplica o que você precisa:

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);
}

Eu acho que funciona bem e pode sobrescrever qualquer outro CSS antes (este: elemento DOM):

this.setAttribute('style', 'padding:2px !important');

Eu diria que você tentou sem adicionar !important ?

CSS inline (que é como o JavaScript adiciona estilo) substitui o CSS da folha de estilo. Tenho certeza que esse é o caso, mesmo quando a regra de CSS da folha de estilos é !important .

Outra questão (talvez uma pergunta estúpida, mas deve ser feita): O elemento que você está tentando trabalhar é display:block; ou display:inline-block; ?

Não sabendo sua experiência em CSS ... elementos inline nem sempre se comportam como você esperaria.


Eu tive o mesmo problema ao tentar alterar uma cor de texto de um item de menu quando "evento". A melhor maneira que encontrei quando tive esse mesmo problema foi:

Primeiro passo: Crie, no seu CSS, uma nova classe com essa finalidade, por exemplo:

.colorw{ color: white !important;}

Última etapa: aplique esta classe usando o método addClass da seguinte forma:

$('.menu-item>a').addClass('colorw');

Problema resolvido.



Não há necessidade de ir para a complexidade da resposta do @ AramKocharyan, nem a necessidade de inserir qualquer tag de estilo dinamicamente.

Apenas sobrescreva o estilo, mas você não precisa analisar nada, por que você faria?

// 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' : '') + ';');
}

Não é possível usar removeProperty() , porque não removerá regras !important no Chrome.
Não é possível usar element.style[property] = '' , porque ele só aceita camelCase no Firefox.

Você provavelmente poderia fazer isso mais curto com jQuery, mas essa função baunilha será executada em navegadores modernos, Internet Explorer 8, etc.


O problema é causado pelo fato de o jQuery não entender o atributo !important e, como tal, não aplicar a regra.

Você pode conseguir contornar esse problema e aplicar a regra referindo-se a ela via addClass() :

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

Ou usando attr() :

$('#elem').attr('style', 'width: 100px !important');

No entanto, a última abordagem desanimaria qualquer regra de estilo in-line definida anteriormente. Portanto, use com cuidado.

Claro, há um bom argumento de que o método do @Nick Craver é mais fácil / mais sábio.

A abordagem acima, attr() modificada ligeiramente para preservar a string / propriedades do style original:

$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });

Pode ou não ser apropriado para sua situação, mas você pode usar seletores de CSS para muitos desses tipos de situações.

Se, por exemplo, você quisesse que a terceira e a sexta instâncias de .cssText tivessem uma largura diferente, você poderia escrever:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

Ou:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

Pode ser assim:

Cache

var node = $('.selector')[0];
OR
var node = document.querySelector('.selector');

Definir CSS

node.style.setProperty('width', '100px', 'important');

Remover CSS

node.style.removeProperty('width');
OR
node.style.width = '';

Precisamos primeiro remover o estilo anterior. Eu removê-lo usando uma expressão regular. Aqui está um exemplo para mudar de cor:

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

Se não é tão relevante e já que você está lidando com um elemento que é #elem , você pode mudar seu id para outra coisa e #elem lo como quiser ...

$('#elem').attr('id', 'cheaterId');

E no seu CSS:

#cheaterId { width: 100px;}

Você consegue fazer isso:

$("#elem").css("cssText", "width: 100px !important;");

Usando "cssText" como o nome da propriedade e o que você deseja que seja adicionado ao CSS como seu valor.


Você pode conseguir isso de duas maneiras:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

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

Uma abordagem alternativa é criar e atualizar dinamicamente a classe CSS em JavaScript. Para fazer isso, podemos usar o elemento style e precisamos empregar o ID para o elemento style para que possamos atualizar a classe 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)

A resposta de David Thomas descreve uma maneira de usar $('#elem').attr('style', …) , mas avisa que o uso dele excluirá estilos previamente definidos no atributo style . Aqui está uma maneira de usar attr() sem esse problema:

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

Como uma função:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}
addStyleAttribute($('#elem'), 'width: 100px !important');

Aqui está uma demonstração do JS Bin .





css