javascript setting Como aplicar! Importante usando.css()?




setar classe css jquery (24)

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.


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

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 .


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

Outro método fácil para resolver esse problema, adicionando o atributo style:

$('.selector').attr('style', 'width:500px !important');

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/


Faça isso deste modo:

$("#elem").get(0).style.width= "100px!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.


Uma maneira alternativa de acrescentar estilo na cabeça:

$('head').append('<style> #elm{width:150px !important} </style>');

Isso acrescenta estilo após todos os seus arquivos CSS, portanto, ele terá maior prioridade do que outros arquivos CSS e será aplicado.


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 = '';

Você pode definir a largura diretamente usando .width() assim:

$("#elem").width(100);

Atualizado para comentários: você tem essa opção também, mas substituirá todos os CSS do elemento, portanto, não é mais viável:

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

Em vez de usar a função css() , tente a função addClass() :

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>

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

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


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

Podemos usar setProperty ou cssText para adicionar !important para um elemento DOM usando JavaScript.

Exemplo 1:

elem.style.setProperty ("color", "green", "important");

Exemplo 2:

elem.style.cssText='color: red !important;'

Eu acho que encontrei uma solução real. Eu fiz isso em uma nova função:

jQuery.style(name, value, priority);

Você pode usá-lo para obter valores com .style('name') como .css('name') , obter a CSSStyleDeclaration com .style() e também definir valores - com a capacidade de especificar a prioridade como 'importante' . Veja this .

Demonstração

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

Aqui está a saída:

null
red
blue
important

A função

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

Veja this para exemplos de como ler e definir os valores CSS. Meu problema era que eu já tinha definido !important para a largura no meu CSS para evitar conflitos com outro tema CSS, mas quaisquer alterações que eu fiz para a largura do jQuery não seriam afetadas, uma vez que seriam adicionadas ao atributo style.

Compatibilidade

Para definir com a prioridade usando a função setProperty , este artigo diz que há suporte para o IE 9 ou superior e todos os outros navegadores. Eu tentei com o IE 8 e ele falhou, e é por isso que eu criei suporte para ele em minhas funções (veja acima). Ele funcionará em todos os outros navegadores usando setProperty, mas precisará do meu código personalizado para funcionar no <IE 9.


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 solução mais segura para isso é adicionar uma classe e, em seguida, fazer a mágica em CSS :-), addClass() e removeClass() deve fazer o trabalho.


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

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

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.


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 também descobri que certos elementos ou add-ons (como o Bootstrap) tem alguns casos especiais de classe onde eles não jogam bem com !important ou outro trabalho como o .addClass/.removeClass , e assim você tem que alterná-los / fora.

Por exemplo, se você usar algo como <table class="table-hover"> a única maneira de modificar com êxito elementos como cores de linhas é ativar / desativar a classe table-hover , como esta

$(your_element).closest("table").toggleClass("table-hover");

Espero que esta solução seja útil para alguém! :)


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




css