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

【问题标题】：Why does document.getElementById('hyperlink_element_id') return the value of the hyperlink's href attribute?为什么 document.getElementById('hyperlink_element_id') 返回超链接的 href 属性的值？
【发布时间】：2009-03-25 22:54:12
【问题描述】：

我正在尝试通过 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.....”并且实际上并没有获取超链接对象本身。

任何想法将不胜感激！

【问题讨论】：

ShowHideImage / ShowHideElement 似乎是问题所在！

标签： asp.net javascript html dom

【解决方案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....."

这不应该发生在您给出的确切示例中...除非您不小心将其包含在引号，例如：

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

我想到的其他问题是函数更改了名称（ShowHideElement/ShowHideImage），并且您似乎试图在链接元素（）上设置“.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]);

【讨论】：