1

このコードは Firefox で正常に動作し、[検索] ボタンをクリックすると、画像が myText ボックス内に右揃えで表示されます。

function showImg(){
   var setStyle = document.getElementById('myText').style == 
     "background-color:white" ? 
     document.getElementById('myText').style = 
     "background: url(/somePath/someImg.gif) no-repeat; background-position:right; background-color:white" : 
     document.getElementById('myText').style == "background-color:white";}

 <input type="text" id="myText">

 <input type="button" value="Search" onClick="showImg()">

しかし、IE8では「メンバーが見つかりません」がスローされます。それは間違いなくスタイルの設定に関連していますが、それを回避する方法がわかりません

助けてくれてありがとう

#

みんな答えてくれてありがとう。cssText は、既存のスタイル文字列を検出しようとすると機能しますが、設定しようとすると機能しません (エラーはスローされませんが、画像もスローされません)。style= を使用して設定しようとすると、Member not found エラーが発生します。それは、visibility:hiddenで画像をプリロードしようとしてもうまくいかないと私に思わせます

 function showImg(){
 if (document.getElementById('myText').cssText = "background-color:white"){ 
alert("style detected"); // this works
document.getElementById('myText').cssText="background: url(/somePath/someImg.gif) no-repeat; background-position:right; background-color:white";  // this doesn't
} else { alert("style not detected"); }}

 <input type="text" id="myText" style="background-color:white">
 <input type="button" value="Search" onClick="showImg()">

#

私は一種の解決策を見つけました.IE8のトグルとして機能します（テキストボックス内のonClickでimgが表示/非表示になります）。ただし、Firefox では、一度だけ (!) 表示/非表示になり、その後は何もしません。誰かがそれを修正する方法を知っていますか?

目に見えない 2 番目の画像 (1 ピクセル、透明) を作成し、それらを切り替えています

 picShow=new Image(); 
 picShow.src="/somePath/realImage.gif"; 
 picHide=new Image(); 
 picHide.src="/somePath/invisibleImage.gif"; 

 function showImg() {
var imgPath = new String();
imgPath = document.getElementById('myText').style.backgroundImage;

if (imgPath == "url(/somePath/invisibleImage.gif)" || imgPath == "") {
    document.getElementById('myText').style.backgroundImage = "url(/somePath/realImage.gif)";
    document.getElementById('myText').style.backgroundRepeat="no-repeat";
    document.getElementById('myText').style.backgroundPosition="right";
} else {
    document.getElementById('myText').style.backgroundImage = "url(/somePath/invisibleImage.gif)";
}

}

#

ああ、Firefox は url("/somePath/invisibleImage.gif") のように URL を二重引用符で囲んで backgroundImage を作成しますが、IE は作成しません。Firefox用にそれらをエスケープする必要があります。他の誰かがそれを必要とする場合に備えて、これは作業コードです。みんなありがとう！

 picShow=new Image(); 
 picShow.src="/somePath/realImage.gif"; 
 picHide=new Image(); 
 picHide.src="/somePath/invisibleImage.gif"; 

 function showImg() {
var imgPath = new String();
imgPath = document.getElementById('myText').style.backgroundImage;

if (imgPath == "url(/somePath/invisibleImage.gif)" || imgPath == "url(\"/somePath/invisibleImage.gif\")" || imgPath == "") {
    document.getElementById('myText').style.backgroundImage = "url(/somePath/realImage.gif)";
    document.getElementById('myText').style.backgroundRepeat="no-repeat";
    document.getElementById('myText').style.backgroundPosition="right";
} else {
    document.getElementById('myText').style.backgroundImage = "url(/somePath/invisibleImage.gif)";
}

}

4

3 に答える 3

3

代わりに.style使用した場所。.cssText

例：

 document.getElementById('myText').cssText == "background-color:white";
于 2013-10-15T20:29:19.340 に答える
0

firefox は、url("/somePath/invisibleImage.gif") のように、URL を二重引用符で囲んで backgroundImage を作成しますが、IE8 は作成しません。Firefox用にそれらをエスケープする必要があります。他の誰かがそれを必要とする場合に備えて、これは作業コードです。

 picShow=new Image(); 
 picShow.src="/somePath/realImage.gif"; 
 picHide=new Image(); 
 picHide.src="/somePath/invisibleImage.gif"; 

 function showImg() {
 var imgPath = new String();
 imgPath = document.getElementById('myText').style.backgroundImage;

 if (imgPath == "url(/somePath/invisibleImage.gif)" || imgPath == "url(\"/somePath/invisibleImage.gif\")" || imgPath == "") {
document.getElementById('myText').style.backgroundImage = "url(/somePath/realImage.gif)";
document.getElementById('myText').style.backgroundRepeat="no-repeat";
document.getElementById('myText').style.backgroundPosition="right";
} else {
document.getElementById('myText').style.backgroundImage = "url(/somePath/invisibleImage.gif)";
}

<input type="text" id="myText">

<input type="button" value="Search" onClick="showImg()">
于 2013-10-16T18:17:57.953 に答える
0

問題は、そのようなスタイルを設定できないことと、そのような三項演算子を使用することは悪い考えです。を使用する必要がありますcssText。

var elem = document.getElementById('myText');
var style = (elem.cssText == "background-color:white" ? "background: url(/somePath/someImg.gif) no-repeat; background-position:right; background-color:white" : 
     "background-color:white";
elem.cssText = style;

より良い解決策は、CSS クラスを設定し、対応するスタイルシートにルールを設定することです。

var elem = document.getElementById('myText');
var className = (elem.className=="active") ? "" : "active";
elem.className = className;

そしてCSS

#myText{
    background-color: #FFFFFF;
}
#myText.active {
    background: url(/somePath/someImg.gif) no-repeat; 
    background-position:right;       
}
于 2013-10-15T20:30:25.273 に答える