在.js文件中获取.aspx控件ID

Question

大家好，

（HEAD PART）

<script type="text/javascript">

function ChangeColor1(elementid)
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage = "url'images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img1.JPG')";
}

function ChangeColor2(elementid) 
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img2.JPG')";
}

function ChangeColor3(elementid)
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img3.JPG')";
}
function ChangeColor4(elementid)
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage =  "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img4.JPG')";
}
</script>

（BODY PART）

<table>
<tr>
<td id="img1" runat="server" onmouseover="ChangeColor1(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>
</tr>  
<tr>
<td id="img2" runat="server" onmouseover="ChangeColor2(this.id)" 
    style="background image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img3" runat="server" onmouseover="ChangeColor3(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img4" runat="server" onmouseover="ChangeColor4(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>
</tr>
</table>

---

此代码在.ASPX页面中正常工作。

但是当我把这个脚本代码放在.js文件中并在.ASPX页面的头部调用它时，这个.js文件运行不正常。

ID = img2，ID = img3，ID = img4 td 未传入.js文件。

如何在.js文件中传递此所有ID ???

Answer 1

问题是ASP.NET不会处理你的JS文件并填写占位符。

一种解决方案是强制ID保持静态，例如：

<td id="img4" runat="server" clientidmode="static" onmouseover="ChangeColor4(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>

clientidmode="static"属性告诉ASP.NET不要破坏ID。那么你根本不需要使用<%= img1.ClientID%>。

Answer 2

在aspx页面上写

<script>
var img1 = '<%= img1.ClientID%>';
var img2= '<%= img2.ClientID%>';
var img3= '<%= img3.ClientID%>';
var img4= '<%= img4.ClientID%>';
var imgchange= '<%= imgchange.ClientID%>';
</script>

<。>在.js文件中

function ChangeColor1(elementid) {
document.getElementById(img1).style.backgroundImage = "url('images/1.jpg')";
document.getElementById(img2).style.backgroundImage = "url('images/2.jpg')";
document.getElementById(img3).style.backgroundImage = "url('images/2.jpg')";
document.getElementById(img4).style.backgroundImage = "url('images/2.jpg')";
}

试试这会对你有所帮助