javascript - ie8 设置样式时找不到成员

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";