4

タイル画像とバックアップ背景色の両方で、ボディの背景を明るい色と暗い色の間で切り替える関数を作成しています。index.htmlでは、私のbodyタグは次のとおりです。

<body style="background-color:#111111; background-image:url('dvsup.png');">

変更したいスタイルをjavascriptでindex.html内に配置する必要があるようです。そうしないと、機能しません。少なくとも、IE9ではありません。

これが私のscript.jsのコードスニペットです：

function _(el){return document.getElementById(el);}
// this just acts as shorthand

//here's the problematic function:
function light(){
    _("lights").className=
    (_("lights").className==="deselected")?
    "selected":"deselected";

    document.body.style.backgroundColor=
    (document.body.style.backgroundColor==="#111111")?
    "#EFEFEF":"#111111";

    document.body.style.backgroundImage=
    (document.body.style.backgroundImage==="url('dvsup.png')")?
    "url('dvsupw.png')":"url('dvsup.png')";}

これはすべて、IE9の仕事用コンピューターで完全に機能します。ボタンが「light（）」を呼び出すと、背景画像と色、およびボタン自体のクラスが変更されます。ChromeとChromium（自宅）では、バラバラになります。classNameの「選択済み」から「選択解除済み」への変更は機能しますが、残りは機能しません。

奇妙なことに、「===」識別子を「style.backgroundColor」と「style.backgroundImage」の「=」アサイナに変更すると、Chromeでは「light（）」を呼び出すと背景画像が「dvsupw.png」に変わります。 、ただし元に戻らない。

明らかな何かが欠けていますか？なぜこれが機能しないのですか？

そして、私がはっきりしていない場合は、教えてください。

ありがとう。アル。

4

3 に答える 3

1

CSSで背景色を設定して、それを呼び出す関数をjQueryで作ってみてはいかがでしょうか。このようなもの：

background-color:#111;
var color = $(this).css("background-color");
/* here put your conditional for the color */
于 2012-11-02T02:01:41.310 に答える
0

同じプロパティに影響を与える他の関数との競合による奇妙な動作が望ましくないと仮定すると、if を使用するだけです。これにより、strange-url の問題も回避されます。

function light(){
    var lights = _('lights');
    if('selected' === (lights.className = (lights.className==='deselected'?'selected':'deselected')) ){
        document.body.style.backgroundColor = '#111111';
        document.body.style.backgroundImage = 'url(\'dvsup.png\')';
    }else{
        document.body.style.backgroundColor = '#EFEFEF';
        document.body.style.backgroundImage = 'url(\'dvsupw.png\')';
    }
    // ...
}

または、他の人が示唆しているように、css を css に保持し、クラスを変更するだけです。

于 2012-11-02T01:56:15.627 に答える
0

ここでテストする IE がないため、IE について話すことはできませんが、Chrome と Firefox でコードをテストしましたが、違いがあります。

  • Chrome は引用符 (一重または二重) を無視するようで、URL を で始まる完全な URL に変更しますhttp://...。したがって、チェックする必要があります=== url(http://domain.com/path/to/dvsup.png)。

  • Firefox は URL を変更しませんが、使用する引用符が何であれ (またはまったく引用符を使用しない場合)、それを二重引用符に置き換えます。そのため、Firefox では を確認する必要があり=== url("dvsup.png")ます。

おっしゃるとおり、IEのことはわかりませんが、ChromeとFirefoxを比較するだけで、もうめちゃくちゃに見えます。@epascarello のアドバイスに従います。クラスをオンに切り替え#lightsているので、クラスもオンに設定<body>し、CSS で両方のクラスの背景色と画像を定義してみませんか?

于 2012-11-02T01:56:24.197 に答える