web-dev-qa-db-ja.com

適用方法！.css（）を使用して重要ですか？

私は!importantというスタイルを適用するのに問題があります。私はもう試した：

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

これは 何もしません ;幅スタイルは適用されません。 cssTextを上書きせずにそのようなスタイルを適用するjQuery風の方法はありますか（これは最初にそれを解析する必要があることなどを意味します）。

編集 ：!importantスタイルをオーバーライドしようとしている!importantスタイルのスタイルシートがあることを付け加えてください。.width()などを使用すると、外部の!importantスタイルによってオーバーライドされるので機能しません。

また、前の値 をオーバーライドする値が計算されます なので、単純に別の外部スタイルを作成することはできません。

javascriptjqueryhtmlcss
663
mkoryak

私は本当の解決策を見つけたと思います。私はそれを新しい関数にしました：

jQuery.style(name, value, priority);

.style('name')と同じように.css('name')で値を取得し、.style()でCSSStyleDeclarationを取得し、値を設定することもできます - 優先度を「重要」として指定する機能もあります。 this を参照してください。

デモ

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

これが出力です。

null
red
blue
important

関数

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

CSSの値を読み、設定する方法の例については this を参照してください。私の問題は私が他のテーマCSSとの衝突を避けるために私のCSSの幅に既に!importantを設定したということでした、しかしjQueryで幅に行ったどんな変更もstyle属性に加えられるので影響を受けないでしょう。

互換性

setProperty関数を使って優先的に設定するために、 この記事 はIE 9+と他のすべてのブラウザのサポートがあると言います。私はIE 8を試してみましたが失敗しました。それが私の関数でサポートを組み込んだ理由です（上記参照）。 setPropertyを使用している他のすべてのブラウザで動作しますが、<IE 9で動作するには私のカスタムコードが必要になります。

314
Aram Kocharyan

この問題はjQueryが!important属性を理解していないために発生し、そのためルールを適用できません。

あなたはその問題を回避し、addClass()を通してそれを参照することによってルールを適用することができるかもしれません：

.importantRule { width: 100px !important; }

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

あるいはattr()を使って：

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

ただし、後者の方法では、以前に設定されたインラインスタイルルールは設定解除されます。だから慎重に使用してください。

もちろん、@ Nick Craverの方法がより簡単で賢明であるという良い議論があります。

上記のattr()アプローチは、元のstyle文字列/プロパティを保持するようにわずかに変更されました。

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

.width() を使用して幅を直接設定できます。

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

コメント用に更新： このオプションもありますが、それは要素上のすべてのcssを置き換えるので、それがそれ以上実行可能であるかどうかはわかりません。

$('#elem').css('cssText', 'width: 100px !important');
139
Nick Craver
var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');
68
BettaSplendens

David Thomasの答え は$('#elem').attr('style', …)の使い方を説明していますが、それを使うとstyle属性で以前に設定されたスタイルが削除されると警告しています。これは、問題なくattr()を使用する方法です。

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

機能として：

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}

addStyleAttribute($('#elem'), 'width: 100px !important');

これは JS Binデモ です。

52
Rory O'Kane

他の答えを読んで実験した後、これは私のために働くものです：

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

ただし、これはIE 8以下では機能しません。

27
Nate

あなたはこれを行うことができます：

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

プロパティ名として "cssText"を使用し、その値としてCSSに追加したいものは何でも使用できます。

23
hawkeye126

これを実現するには2つの方法があります。

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

@ AramKocharyanの答えを複雑にする必要はなく、またスタイルタグを動的に挿入する必要もありません。

スタイルを上書きするだけで、 しかし 何も解析する必要はありません。なぜでしょうか。

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

removeProperty()はChromeの!importantルールを削除しないため使用できません。
element.style[property] = ''はFirefoxではcamelCaseしか受け付けないため使用できません。

あなたはおそらくjQueryでこれを短くすることができますが、このVanilla関数は現代のブラウザ、Internet Explorer 8などで動作します。

14
Hashbrown

これが私がこの問題に遭遇した後にしたことです...

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

それほど関連性がなく、#elemである1つの要素を扱っているので、あなたはそのidを他の何かに変更してあなたが望むようにそれをスタイルすることができます...

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

そしてあなたのCSSでは：

#cheaterId { width: 100px;}
9
Sinan

この解決策は、以前のスタイルをオーバーライドするのではなく、必要なものだけを適用します。

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);
}
9
Alain Beauvois

css()関数を使う代わりに、addClass()関数を試してください。

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

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

私からのこの問題に対する最も簡単で最良の解決策は、.css（）または.attr（）の代わりに単にaddClass（）を使用することでした。

例えば：

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

そしてあなたのCSSファイルで：

.importantClass {
    width: 100px !important;
}
8
Jack Fairfield

このように見えるかもしれません：

キャッシュ

var node = $（ '。selector'）[0]; 
 OR 
 var node = document.querySelector（ '。selector'）;

CSSを設定する

node.style.setProperty（ 'width'、 '100px'、 'important'）;

CSSを削除

node.style.removeProperty（ 'width'）; 
 OR 
 node.style.width = '';
6
SerzN1

最初に前のスタイルを削除する必要があります。正規表現を使って削除します。これは色を変えるための例です：

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

頭にスタイルを追加する別の方法：

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

これはすべてのCSSファイルの後にstyleを追加するので、他のCSSファイルよりも優先度が高くなり、適用されます。

6
h0mayun

ちなみに、jQueryではサポートされていないため、機能しません。 2012年に提出されたチケット（ ＃11173 $（elem）.css（ "property"、 "value！important"）が失敗した ）があり、最終的にWONTFIXとしてクローズされました。

6
Álvaro González

これを好きですか？

$("#elem").get(0).style.width= "100px!important";
5
user217447

3つの作業例

私は似たような状況を経験しましたが、長い間.closest（）で苦労した後に.find（）を使用しました。

サンプルコード

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

代替案

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

作業： http://jsfiddle.net/fx4mbp6c/ /

4
computerguy

私はそれがうまくいって、以前に他のどのCSSも上書きすることができると思います（これ：DOM要素）：

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

この解決策はすべての計算されたjavascriptをそのままにして要素に重要なタグを追加します。

$('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
4
Sebastian Leandro

!importantを付けずに試してみたと思いますか。

インラインCSS（これはJavaScriptがスタイルを追加する方法です）はスタイルシートCSSをオーバーライドします。スタイルシートのCSSルールに!importantが含まれている場合でも、それが当てはまると確信しています。

もう一つの質問（たぶん愚かな質問ですが、尋ねられなければなりません）：あなたがdisplay:block;またはdisplay:inline-block;に取り組んでいる要素ですか？

CSSの専門知識がわからない...インライン要素が必ずしも期待通りに動作するとは限りません。

3
Dave Gregory

JavaScriptを使用してDOM要素に!importantを追加するには、setPropertyまたはcssTextを使用できます。

例1

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

例2

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

それはあなたの状況には適切かもしれませんし、そうでないかもしれませんが、あなたはこれらのタイプの状況の多くにCSSセレクターを使うことができます。

たとえば、.cssTextの3番目と6番目のインスタンスの幅を変えたい場合は、次のように書くことができます。

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

または

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

これに対する最も安全な回避策は、クラスを追加してからCSSのマジックを実行することです:-)、addClass()、およびremoveClass()はその仕事をするべきです。

2
Ryan S

「イベント」のときにメニュー項目のテキストの色を変更しようとしたときと同じ問題がありました。私がこれと同じ問題を抱えているときに私が見つけた最良の方法は次のとおりです。

最初のステップ：あなたのCSSの中に、この目的で新しいクラスを作成してください。例えば：

.colorw{ color: white !important;}

最後のステップ：次のようにaddClassメソッドを使ってこのクラスを適用します。

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

問題が解決しました。

2
JoelBonetR

また、特定の要素やアドオン（Bootstrapなど）には、!importantや.addClass/.removeClassのような他の回避策ではうまく機能しない特別なクラスケースがあることも発見しました。したがって、それらをオン/オフに切り替える必要があります。

たとえば、<table class="table-hover">のようなものを使用する場合、行の色のような要素を正常に変更する唯一の方法は、table-hoverクラスのオン/オフを切り替えることです。

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

うまくいけば、この回避策は誰かに役立つでしょう！ :)

2
Austin

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

別の方法は、JavaScriptでCSSクラスを動的に作成および更新することです。そのためには、style要素を使用することができ、CSSクラスを更新できるようにstyle要素にIDを使用する必要があります。

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)
1
Razan Paul