Question

我正在开发一个使用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>

在代码隐藏文件的load事件中，我添加了：

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

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

Microsoft JScript运行时错误：无法获取属性“style”的值：object为null或undefined。

当我检查代码时，这是我在aspx（动态）生成的页面中看到的内容：

<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;" />

我觉得这很奇怪，因为动态生成的页面具有“样式”属性。任何线索？

Answer 1

使用document.getElementById（）获取有问题的元素，使用.getAttribute（）获取样式，使用setAttribute（）来设置它
我强烈建议您查看jquery以获取任何内容javascript http://jquery.com/

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

Answer 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; 
}

asp.net onMouseEnter修改按钮的位置

3 个答案: