<img> 图像的 HTML Javascript getElementById 返回 null
Posted
技术标签:
【中文标题】<img> 图像的 HTML Javascript getElementById 返回 null【英文标题】：HTML Javascript getElementById for <img> image returns null 【发布时间】：2012-08-15 10:47:51 【问题描述】：噢噢噢噢噢我的img标签去哪了？
我有以下 html。我正在为 searchTopPanel div 使用 OnClick 来切换 searchPopDown 可见性。作为其中的一部分，我想动态更改 img 的 src - 以指示折叠/展开。这是 HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#searchTopPanel
background-color: rgb(155,154,211);
</style>
<script type="text/javascript">
function toggleSearch()
var style = document.getElementById("searchPopDown").style;
var img = document.getElementById("xxxx");
style.display = (style.display != "none") ? "none" : "block";
img.src = (img.src != "images/expand.png") ? "images/expand.png" : "images/collapse.png";
</script>
</head>
<body>
<div id="mainSearch">
<div id="searchTopPanel" onclick="toggleSearch()" style="cursor:pointer">
<span>Advanced Search</span>
<img id="xxxx" src="images/expand.png" />
</div>
<div id="searchPopDown" style="display:none">
<span>Search Options</span>
<div id="searchOptions">
<table>
<tr><td>Summary</td><td>
<select id="Select1">
<option>Contains</option>
<option>Does not contain</option>
<option>Equal to</option>
<option>Not equal to</option>
</select></td><td>
<input id="Text1" type="text" /></td></tr>
</table>
</div>
<input id="search" type="submit" value="Search" />
</div>
</div>
</body>
</html>
我已将我的 img xxxx 命名为。我已经尝试了各种方法来找到它。 我正在使用 IE9 从 VS2010 运行它。我有能够调试 javascript 的优势（dis），当我调用 var img = document.getElementById("xxxx"); 时，它会显示 xxxx 为 null； .
希望我今天早上很愚蠢，错过了一些明显的事情。
有什么想法吗？
谢谢，
安德斯
【问题讨论】：
我把你所有的代码复制到一个jsfiddle中，在你设置img变量之后添加了一个alert(img)，它not为null：jsfiddle.net/nnnnnn/qBcje
你在你的应用程序中使用 jquery 吗？
【参考方案1】：
我已经整理了一个JS Fiddle to demonstrate that your JavaScript works。
考虑到这一点，我建议您的图像路径不正确。
也许：
images/expand.png
应该是：
/images/expand.png
或者图像位置/名称可能有误。
【讨论】：
谢谢。看起来我需要刷新浏览器，因为停止和启动 VS2010 并没有真正刷新页面内容。【参考方案2】：img.src 扩展为完整的 url。试试这个：
function toggleSearch()
var style = document.getElementById("searchPopDown").style;
var img = document.getElementById("xxxx");
style.display = (style.display != "none") ? "none" : "block";
img.expanded = !img.expanded || false;
img.src = (img.expanded ? "images/expand.png" : "images/collapse.png");
【讨论】：
好的。看起来 IE 和 VS2010 正在玩有趣的 $$%£"！。我停止运行并将警报放在 java 脚本中。运行解决方案并没有显示警报。我在浏览器中按 F5，一切都开始运行了会期望的。但我添加了这段代码，它对我有用。【参考方案3】：src 属性的值是完整路径而不是相对路径，即使您将其设置为相对路径。所以这样改：
function toggleSearch()
var style = document.getElementById("searchPopDown").style;
var img = document.getElementById("xxxx");
//console.log(img.src); /* will show you the full path to image source */
style.display = (style.display != "none") ? "none" : "block";
img.src = (img.src.indexOf("images/expand.png") < 0 )
? "images/expand.png"
: "images/collapse.png";
另一种解决方案是：
style.display = (style.display != "none") ? "none" : "block";
// Sure it's better to initialize this variable once -
// somewhere outside the click handler:
var state =
'none': 'images/expand.png',
'block': 'images/collapse.png'
img.src = state[style.display];
【讨论】：
以上是关于<img> 图像的 HTML Javascript getElementById 返回 null的主要内容，如果未能解决你的问题，请参考以下文章
使用 php 渲染图像并使用 html <img> 标签输出
媒体文件未在模板中正确加载 (HTML <img>)。静态文件/图像正常工作