ie8 设置样式时找不到成员

ie8 Member not found when setting style

本文关键字：找不到 成员 样式 设置 ie8      更新时间：2023-09-26

这段代码在火狐中工作正常，当单击搜索按钮时，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= 来设置它，我会收到"找不到成员"错误。这让我认为尝试用可见性预加载图像：隐藏的 woudn 也不起作用

 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 没有。 只需要为火狐浏览器转义它们。 这是工作代码，以防万一其他人需要它。再次感谢大家！

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

}

你使用过的地方.style改用.cssText。

例：

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

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

Firefox 会创建 backgroundImage 将网址放在双引号内，例如url（"/somePath/invisibleImage.gif"），但IE8没有。只需要逃离它们以获得火狐。这是工作代码，以防万一其他人需要它。

 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()">
相关文章：