asp.net onMouseEnter 修改按钮的位置答案

【问题标题】：asp.net onMouseEnter to modify button's locationasp.net onMouseEnter 修改按钮的位置
【发布时间】：2011-08-26 15:35:16
【问题描述】：

我正在使用 Visual Studio 和 aspx 开发一款纸牌游戏。

在页面 Head 标签中，我添加了一个这样的 Javascript 函数：

<script type="text/javascript">
    function cardMouseEnter()
    { document.forms[0].bCard1.style.top -= 5; }
</script>

卡片由asp:ImageButton 表示，其位置是绝对的，其样式属性在 .aspx 页面中如下所示：

<asp:ImageButton ID="bNCard1" runat="server" 
        style="position: absolute; top: 3px; left: 2px;  
        height: 98px; width: 73px;" ></asp:ImageButton>

在我添加的代码隐藏文件的加载事件中：

bCard1.Attributes.Add("onMouseOver", "cardMouseEnter()")

当我尝试运行页面并将鼠标放在卡上时，出现 Javascript 错误：

Microsoft JScript 运行时错误：无法获取属性“样式”的值：对象为空或未定义。

当我检查代码时，我可以在 aspx(dynamic) 生成的页面中看到：

<input type="image" name="bCard1" id="bNorth1" onMouseOver="cardMouseEnter()" src="SomeCard.jpg"
       style="border-width:0px;top: 3px; left: 2px; position: absolute; 
       height: 106px; width: 73px; font-size:1.4em;" />

我觉得这很奇怪，因为动态生成的页面有一个“样式”属性。有什么线索吗？

【问题讨论】：

标签： javascript asp.net button location dom-events

【解决方案1】：

使用 document.getElementById() 获取相关元素，使用 .getAttribute() 获取样式，使用 setAttribute() 设置样式
我强烈建议您查看 jquery 的任何内容 javascript http://jquery.com/

【讨论】：

【解决方案2】：

脚本：

function cardMouseEnter(id)
{ 
    document.getElementById(id).style.top -= 5; 
}

代码隐藏：

bNCard1.Attributes.Add("onMouseOver", "cardMouseEnter('" + bNCard1.ClientID + "')");

标记：

<asp:ImageButton ID="bNCard1" runat="server" 
        style="position: absolute; top: 3px; left: 2px;  
        height: 98px; width: 73px;" ></asp:ImageButton>

【讨论】：

你不能只做：cardMouseEnter(this)，然后传入实际的控制吗？
是的，你可以，我会亲自使用不显眼的 jQuery 并使用 MVC。
Rick 的解决方案适用于“某些”样式属性，例如边框，但不适用于顶部位置。另一方面，cardMouseEnter(this) 不起作用。为 Rick +1，但我不接受该解决方案，因为 style.top 无法识别。
原生样式属性与解决方案无关，通过JavaScript改变样式的方法有很多。

【解决方案3】：

这样做：

<input type="image" name="bCard1" id="bNorth1" onMouseOver="cardMouseEnter(this)" ...>

<asp:ImageButton ID="bNCard1" runat="server" onmouseover="cardMouseEnter(this)" ...>

还有你的JS函数：

function cardMouseEnter(ctrlToMove) { 
   ctrlToMove.style.top -= 5; 
}

【讨论】：