9

まず、CSS 式は多くの点で無効であり、間違っていることを知っ!importantています。これは、特殊なケースの stylesheet用です。

要するに

私の質問は... CSS 式で!importantフラグを設定する方法はありますか?

たとえば、これは機能しません:

a { color:expression('red !important'); }

[編集: 以下の MarmaladeToday のコメントに感謝]. これも機能しません:

a { color:expression('red') !important; }

これを他の方法で行うことはできますか？

詳細に

私が実際にやろうとしているのはinherit、IE6 & 7 の値を模倣することです。これは機能します。

color:expression(
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
    );

!importantしかし、フラグも設定したいのですが、これは機能しません:

color:expression(
  (
    this.parentNode.currentStyle ?
        this.parentNode.currentStyle.color: 'red'
  ) + ' !important');

!importantJavaScript では、要素のstyleオブジェクトを介して設定できないことは承知しています。たとえば、これは機能しません:

element.style.color = 'red !important';

ただし、要素の属性を介して設定することは可能です:!importantstyle 

element.setAttribute('style', 'color:red !important;');

それで... CSS式はstyleオブジェクトとの相互作用に限定されているので、私が達成したいことは不可能です-または、式が要素の属性に影響を与える方法、または!important他の方法で渡す方法はありますか?

バウンティの開始

これまでのところ明確な答えがないので、バウンティを開始します。

inherit !important理想的には、CSS 表現の有無にかかわらず、IE6 および IE7 で模倣するための CSS ベースのソリューションを探しています。（投稿する前に、提案が機能することを確認してください）。

少なくとも、これは不可能だと言っている信頼できる参考文献へのリンクは、この一連の考えを休ませることができることを意味します -!importantルールでの CSS 式の使用について言及しているものは見たことがありません。

4

6 に答える 6

3

これらの CSS 式が機能しない理由は、IE がカスケードの最後のプロパティの式のみを評価するためです。

たとえば、内部にリンクを含む HTML ドキュメントと次の「CSS」がある場合、

a {
    color: expression(function(e){
        alert('success');
        e.runtimeStyle.color = 'blue';
    }(this));
}
a { color: red; }

CSS 式は評価されないため、その警告は表示されません (スタイルの変更は気にしません)。いいえ、式を使用して!importantフラグを設定することはできません。

つまり、同じプロパティに設定しようとしたときではありません。あなたはだますことができます。しかし、それは式をもう少し複雑にします:

a {
    filter: expression(function(e){
        e.runtimeStyle.color = 'blue';
        alert('success');
        e.style.filter = '';
    }(this));
}
a { color: red; }

ここで注意すべき点がいくつかあります。

別の CSS プロパティを使用するだけで、式が確実に評価されます。または、少なくとも、同じプロパティを既に使用しているカスケードのさらに下に別のルールがある場合は、まだ運が悪いため、もう少し確実です。

次に、runtimeStyleの代わりに使用する必要がありcurrentStyleます。ここで使用currentStyleすると、2 番目のルールが上書きされてしまいます。runtimeStyle他のすべての CSS をオーバーライドします (宣言を除く!important)。したがって、これは JScript で!important.

filterまた、プロパティ自体もリセットしていることに注意してください。これにより、式が継続的に再評価されるのを防ぎます。しかし、それによってパフォーマンスが低下する可能性がありますが、それほど重要ではないと思います。ここに入れている主な理由はalert()、これらの式に s を追加したためであり、これらのポップアップを永遠に表示したくないからです。

実際には、作成した他のプロパティを使用することもできます。これも機能します：

a {
    bogus: expression(function(e){
        e.runtimeStyle.color = 'blue';
    }(this));
}

ただし、bogusプロパティは実際には存在しないため、Javascript を使用してリセットすることはできないため、これは継続的に再評価されます。

于 2009-10-31T21:18:49.497 に答える
2

color:expression('red') !重要;

于 2009-10-16T14:43:26.123 に答える
2

動作プロパティを試すことができます。式よりもはるかに用途が広いです。

これを試して、

継承.htc:

<SCRIPT language="JScript">
    //add your own inheritance logic here, you can use element.parentNode etc.
    var prop = element.currentStyle.behaviorProp;//specified in stylesheet
    var val = element.currentStyle.behaviorValue;//specified in stylesheet
    element.style[prop] = val;//set as inline style, you can also use setAttribute here.
</SCRIPT>

CSS:

body #div1 {
    color:blue;
}

#div1 {
    color:red;/*stays blue, because 'body #div1' is more specific*/
    behaviorProp:color;/*specify styleproperty for the .htc*/
    behaviorValue:green;/*WILL become green, because the .htc sets it as an inline style, which has priority.*/
    behavior:url(inherit.htc);
}
于 2009-10-29T20:57:05.203 に答える
1

quirksmodeの由緒ある ppk は、CSS、JavaScript、および!importantキーワードに関するいくつかの作業を行いました。(Firefox またはその他の非 IE ブラウザーでのテストでは、以下cssRulesの代わりに使用することに注意してくださいrules。

リンクは次のとおりです：W3C DOM互換性

これを行うことで、スタイルシートのスタイル ルールが重要かどうかを明らかに読み取ることができます (これにより、2 番目のスタイルシートの 2 番目の css ルールの color プロパティの重要度レベルが取得されます。MICROSOFT INTERNET EXPLORERを除くすべてのブラウザーで。 .

document.styleSheets[1].rules[1].style.getPropertyPriority('color')
//Returns important when the style is marked !important.
//Returns an empty string otherwise.

現在、彼の調査により、 を設定するさらに別の方法が明らかになりました!important。残念ながら、これも Internet Explorer 以外のブラウザでしか機能しないようです。

// where x is a DOM element
x.style.setProperty('color','#00cc00','!important');
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00','!important');

どうやらこの奇妙な構文は、 として設定していない場合!important、3 番目のパラメーターを に設定する必要がありますnull。

// where x is a DOM element
x.style.setProperty('color','#00cc00',null);
// Set the color of x or the second rule in the second style sheet to green.
document.styleSheets[1].rules[1].style.setProperty('color','#00cc00',null);

現在、MSDN には " " と呼ばれるプロパティがあり、DOM 要素cssTextのオブジェクトにぶら下がっています。styleCSS 式が問題ないことも示しています。使用法は次のとおりです。

x.style.cssText = 'color: #00cc00 !important';

さて、これは重要かもしれません（へー）、MSDNページには次のように書かれています（私のものを強調してください）：

前の値の代わりに DHTML 式を使用できます。Internet Explorer 8 の時点で、式は IE8 モードでサポートされていません。詳細については、「動的プロパティについて」を参照してください。

cssText の ppk のテストもチェックする価値があるかもしれません。

残念ながら、このラップトップで利用できる Windows Microsoft Internet Explorer の該当するバージョンはありませんが、おそらくこれは役に立つでしょう。私はこれがどのように揺れ動くのか興味があります.これは私が遭遇したものです（!importantJavaScriptで設定します）が、それを回避する他の方法を見つけました。

興味深い質問で頑張ってください！

于 2009-10-31T06:07:44.600 に答える
1

これは気分が悪くなるように聞こえますが、次のようになります。

color: expression((function (_this) {
    window.setTimeout(function () {
        _this.setAttribute("style", "color:" +
            (_this.parentNode.currentStyle ?
                _this.parentNode.currentStyle.color : 'red') + " !important";
    }, 0);
    return _this.parentNode.currentStyle ?
        _this.parentNode.currentStyle.color : 'red';
})(this));

言い換えれば、これは：

  1. "red"すぐに (または親の色) を返します。
  2. 直後"red !important"に設定される（または何でも）タイムアウトを設定します。

ただし、これによりブラウザが停止する可能性があることに注意してください。私はそれをテストしませんでしたし、CSS 式を含むものはひどく間違っている傾向があります。

于 2009-10-19T13:01:06.233 に答える