1

これは奇妙な質問だと思います...そして、それが良い考えかどうかさえわかりません。要素を作成して、「以前のスタイルシートが何を言おうと気にしませんでした。これが私がスタイルを設定したい方法です」と言うことができますか?

例として、次のようなスタイルシートがあるとします。

button {
   /* whole bunch of stuff here, not even sure what all */
}

.someClass button {
   /* and some other crap here*/
}

.anotherClass button {
  /* and more here */
}

そして、次のようなことを行う Javascript を書きたいと思います。

function insertConstantButton(elemId) {
    var unchangeableButton = $('<button/>');
    unchangeableButton.css('whatIReallyWant', 'etc');
    $("#" + elemId).append(unchangeableButton);
    andNowIMagicallyStopCSSFromApplyingTo(unchangeableButton);
}

私が言うように、これは悪い考えでさえあるかもしれません...ただ疑問に思っています...このボタンを作成するコードがあり、見栄えは良いのですが、突然、通常とは異なるクラスのコンテナの下に表示され、 （驚）見た目が全然違う。私はしたくない。へー。

更新: ええ、これが悪い考えだとちょっと知っていましたが、それが可能かどうか疑問に思っていました. そうでなくても不思議ではありません。CSS が壊れてしまうからです :)

想定される解決策ではなく、一般的な問題が必要な人へ: UI チームが望んでいるように、一貫した外観のスクロール ボタンを追加するコードがいくつかあります。私は今それらをモーダル ダイアログに入れようとしていますが、モーダル ダイアログには ".ourCompanyPopup ボタン { stuffIDontWantOnMyScrollbars; }" のようなスタイルシートにたくさんのものがあります。それぞれをオーバーライドすると PITA になります。

おそらく、スタイルシートを「.ourCompanyPopup button:not(.myPreciousScrollButtons)」のようなものに変更することもできます。うーん...

4

3 に答える 3

3

IDを使用します。1 つの ID が 1,500 万のクラスをオーバーライドします。

于 2013-04-10T17:32:05.520 に答える
2

簡単に：いいえ。

とにかくCSSが適用されます。できることは次のとおりです。

  • 不要な CSS を上書きする
  • ボタンが含まれないように、不要なCSSを具体的にします

私はこれをお勧めします：

jQuery

function insertConstantButton(elemId) {
        var unchangeableButton = $('<button class="dontchange" />');
        unchangeableButton.css('whatIReallyWant', 'etc');
        $("#" + elemId).append(unchangeableButton);
    }

CSS

button:not(.dontchange) {
   /* whole bunch of stuff here, not even sure what all */
}

.someClass button:not(.dontchange) {
   /* and some other crap here*/
}

.anotherClass button:not(.dontchange) {
  /* and more here */
}

それが十分に洗練されていない場合は、ボタンに ID を付けて、スタイルシートでスタイルを設定します。 jQuery

function insertConstantButton(elemId) {
        var unchangeableButton = $('<button id="dontchange" />');
        $("#" + elemId).append(unchangeableButton);
    }

CSS

button#dontchange {
    /* your CSS */
}
于 2013-04-10T17:29:01.517 に答える
0

修飾子を使用できますが、!important上書きしたくないすべてのスタイルを次のようにマークする必要があります!important。

button {
  background-color: red;
}

.what-i-really-want {
  background-color: blue !important;
}

function insertConstantButton(elemId) {
  var unchangeableButton = $('<button/>');
  unchangeableButton.addClass('what-i-really-want');
  $("#" + elemId).append(unchangeableButton);
  andNowIMagicallyStopCSSFromApplyingTo(unchangeableButton);
}
于 2013-04-10T17:29:11.503 に答える