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

Get .aspx control ID in .js file

本文关键字：aspx 控件 ID 获取 js 文件      更新时间：2023-09-26

大家好，

（头部） 

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

（身体部位）

<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文件工作不好。

td的ID=img2、ID=img3、ID=img24未传入.js文件。

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

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

试试这个，它会帮助你

问题是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%>。

相关文章：