为什么document.getElementById('hyperlink_element_id')返回超链接的href属性的值？

Question

我试图通过javascript获取Web.UI.WebControls.HyperLink对象本身,以便我可以修改它的ImageUrl.

这里我将超链接的NavigateUrl设置为我的javascript函数调用:

lnkShowHide.NavigateUrl = String.Format(
    "javascript:ShowHideElement('{0}');", lnkShowHide.ClientID
)

这是我的javascript函数:

function ShowHideElement(img) {
   var ele = document.getElementById(img);
   if(ele != null) {
      // Not sure if this will change the hyperlink's ImageUrl property???
      img.src = 'smallPlus.gif';
   }
}

但是,如果我在调用getElementById之后检查'ele'的值,它会打印" String.Format("javascript:ShowHideElement....."并且实际上并没有获得超链接对象本身.

任何想法将不胜感激!

Answer 1

为什么document.getElementById()返回超链接的href属性的值？

它没有.但是当你"alert(element)"时,alert()调用元素上的toString(),HTMLLinkElement.toString()返回href属性的内容,因此"alert(link)"会发出与"alert"相同的结果(link.href)".

(这有点奇怪和令人困惑,但这就是JavaScript 1.0的工作方式,因此现在没有太多可以解决的问题.)

我在调用getElementById之后检查'ele'的值它打印"String.Format("javascript:ShowHideElement ....."

这不应该发生在您给出的确切示例中......除非您不小心将其括在引号中,否则服务器端"String.Format ..."代码无法进入客户端,例如.:

lnkShowHide.NavigateUrl = "String.Format(...)";

我想到的其他问题是函数更改名称(ShowHideElement/ShowHideImage),并且您似乎试图在链接元素(<a>)上设置'.src'.链接没有.src,只有图像.

无论如何,你可能不想像这样做一个显示/隐藏小部件.javascript:URL总是错误的,你的例子涉及很多嵌套的字符串,它们总是很脆弱.您可以尝试"不引人注目的脚本"方法,生成如下标记:

<div class="showhide"> blah blah blah </div>

使用JavaScript在客户端添加打开/关闭功能(因此非JavaScript UA和搜索引擎将看到整个页面而不隐藏位).例如.:

function ShowHider(element) {
    var img= document.createElement('img');
    element.parentNode.insertBefore(img, element);

    function toggle() {
        var show= element.style.display=='none';
        element.style.display= show? 'block' : 'none';
        img.src= '/images/showhide/'+(show? 'open' : 'closed')+'.gif';
        img.alt= show? '-' : '+';
        img.title= 'Click to '+(show? 'close' : 'open');
    }
    img.onclick= toggle;
    toggle();
}

// Apply ShowHider to all divs with className showhide
//
var divs= document.getElementsByTagName('div');
for (var i= divs.length; i-->0;)
    if (divs[i].className=='showhide')
        ShowHider(divs[i]);