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 错误。这让我觉得尝试用可见性预加载图像：隐藏也行不通

 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 在文本框中出现/消失 onClick）。但是，在 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)";
}

}

4

3 回答 3

3

你在哪里使用.styleuse.cssText代替。

例子：

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

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()">
于 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 回答