Question

此代码在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错误。这让我觉得尝试用可见性预加载图像：隐藏不起作用

 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中作为切换工作（img在文本框内部显示/消失）。但是，在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 == "") {
    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创建了backgroundImage，将url放在双引号内，如url（“/ somePath / invisibleImage.gif”），但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)";
}

}

Answer 1

您曾使用.style使用.cssText代替。

示例：

 document.getElementById('myText').cssText == "background-color:white";

Answer 2

问题是你无法设置这样的风格，使用像这样的三元运算符是一个坏主意。您需要使用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;       
}

Answer 3

firefox创建backgroundImage，将url放在双引号内，如 url（“/ somePath / invisibleImage.gif”），但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()">

ie8设置样式时找不到成员

＃

＃

3 个答案: