如何更改<；中的标题属性；a>；使用JavaScript标记？_Javascript_Html_Dom

如何更改<；中的标题属性；a>；使用JavaScript标记？

javascript html dom

如何更改<；中的标题属性；a>；使用JavaScript标记？,javascript,html,dom,Javascript,Html,Dom,我有一个html标记，最初我想要工具提示名称，如“title”属性中所述。单击链接后，我需要不同的工具提示名称。我使用了下面的代码，但它不工作。有人能帮我吗 <html> <head> <script> function tool(){ document.getElementsByName(link).title = "after click"; } </script> </head> <body> <a

我有一个html标记，最初我想要工具提示名称，如“title”属性中所述。单击链接后，我需要不同的工具提示名称。我使用了下面的代码，但它不工作。有人能帮我吗

<html>
<head>
<script>

function tool(){
document.getElementsByName(link).title = "after click";
}

</script>
</head>
<body>
    <a href="javascript:tool()" name ="link" title="before click">click here</a>
</body>
</html>


函数工具（）{
document.getElementsByName（link）.title=“单击后”；
}

使用jquery，您可以编写以下命令：

$("a#link").attr("title","after click");

可以对要更改的元素使用setAttribute（attributeName，value）

document.getElementById('link').setAttribute('title', 'after click');

这也适用于自定义属性

去掉脚本元素中的BR标记，并将工具函数重写为：

function tool(){
    document.getElementsByName("link")[0].title = "after click";
}

它会起作用的。然而，这并不是最佳的方式。如果将id参数分配给字段，则至少可以使用document.getElementById（..），或者更好地使用jQuery之类的库。

我将使用下载它并向其添加脚本引用

给你的标签一个id，比如myLink

然后可以使用JQuery编写

$(document).ready(function () {

    $("#myLink").click(function(){

        $("#myLink").attr("title","after click");

    });

});

正如waxwing所建议的，最好使用getElementById（）


函数工具（）{
document.getElementById（'aLink'）.title=“单击后”；
}

您提供的代码有两个问题：

顾名思义，documentent.getElementById按ID而不是名称查找内容。您需要在锚定标记中提供一个ID。将链接更改为
您正在向documentent.getElementById提供一个名为“link”的变量的内容，该变量可能不存在。实际上，您希望传递一个需要引号的文本字符串。将该调用更改为
```
document.getElementById（“link”）.title=“单击后”
```


总而言之，您的代码是这样的：
<html>
<head>
    <script>
        function tool(){
            document.getElementById("link").title = "after click";
        }
    </script>
</head>
<body>
    <a href="javascript:tool()" id="link" name="link" title="before click">
        click here
    </a>
</body>
</html>


函数工具（）{
document.getElementById（“link”）.title=“单击后”；
}
更正为Jason代码：
写document.getElementById（“link”）.title代替document.getElementsByName（“link”）.title
我已经在IE7和Firefox3上进行了测试
<html>
<head>
    <script>
            function tool(){
                    document.getElementById("link").title = "after click";
            }
    </script>
</head>
<body>
    <a href="javascript:tool()" id="link" title="before click">
            click here
    </a>
</body>
</html> 


函数工具（）{
document.getElementById（“link”）.title=“单击后”；
}

您还可以浏览本文，了解如何使用javascript创建漂亮的工具提示：http://devirtu.com/2008/08/14/如何使用javascript制作工具提示/
我假设这只是一个简单的示例，因为更改链接onclick
可以内联完成：
 <a href="#" onclick="this.title='after click'" title="before click">...</a>



无论哪种方法，最好的方法是避免进行任何查找。只需将对链接的引用作为参数传递给函数：
<script>
  function tool(link) {
    link.title = 'after click';
  }
</script>
<a href="#" onclick="tool(this)" title="before click">...</a>


功能工具（链接）{
link.title='单击后'；
}

当然，正如Grant所建议的那样，您也可以将title值传递给函数，但这样做实际上会更好，只需一直执行内联版本并跳过函数。

<html>
<head>
<script>
window.onload = function () {
    window.document.getElementById("link").onclick = function () {
        this.title = "after click";
        return false;
    };
};
</script>
</head>
<body>
    <a href="http://www.example.com" id="link" title="before click">Click Here</a>
</body>
</html>

window.onload=函数（）{
window.document.getElementById（“链接”）.onclick=function（）{
this.title=“单击后”；
返回false；
};
};
我在这里解决两个问题：
鼠标悬停时标题会更改，但代码中不会更改：

... 

home

... 

document.getElementsByName（“home”）[0]。title=“title changed”//工作



如何更改链接的类别：



发件人：home

致：主页


document.getElementsByName（“主页”）[0]。class=“当前”//不起作用



谢谢

标题已更改，但仅在生成的代码中更改。这就是JS的工作原理——它只处理演示。尝试使用Firefox的Webdeveloper工具栏，因为它可以选择显示生成的代码和原始代码。如果您需要任何其他方法，请考虑使用一些服务器端编程
我的意见：

不要将JS与HTML混合使用。如果你需要更新你的代码，这会容易得多——搜索“不引人注目的JS”来更好地理解这个问题<代码>

长版本：（同时阅读评论）

注意：如果您已经在当前页面上，是否有必要显示链接？
他没有使用jQuery，而是使用直接的DOM操作。我用过你的代码，但它抛出了一个错误“预期对象”。我现在该怎么办？为什么要通过将jquery添加到组合中来使事情复杂化？这是一个普通的dhtml。这显示错误“Object不支持此属性或方法”getElementsByName返回节点列表，您必须指定要使用的元素，即getElementsByName（link）[some number].setAttribute（[…]）。我的错误。我以为你是按id选择的。我已经更新了代码。我无法添加新库，因为我们公司没有什么限制。请告诉SumjQuery以外的其他选项！显示错误“document.getElementsByName（“link”）.0”为空或不是对象…..0”？我想你的意思是[0]。请注意如何使用0。getElementsByName（“链接”）[0]是访问位于位置0 getElementsByName（“链接”）的元素的正确方法。0将尝试访问不存在的属性，因此当getElementById是您想要执行的操作时，ExceptionOn永远不使用getElementsByName。正如你所看到的，这只会让问题变得更糟。levik的答案（）是这里更好的解决方案。他可以将该函数添加到任意多个链接中，并控制每个链接的标题文本。您只需要集合中的第一项。请看@Waxwing的答案。谢谢你。我想这让OP的代码出了三个问题。我已经更正了我的条目。我会使用：function tool（link，text）{link.title=text；}和使解决方案更通用一些。但是对于一次性的，答案是可以的。
函数changetTitle1（）{//查找 <script> function tool(link) { link.title = 'after click'; } </script> <a href="#" onclick="tool(this)" title="before click">...</a> <html> <head> <script> window.onload = function () { window.document.getElementById("link").onclick = function () { this.title = "after click"; return false; }; }; </script> </head> <body> <a href="http://www.example.com" id="link" title="before click">Click Here</a> </body> </html> function changeTitle1(){ // find the array of links inside the document var a = document.getElementsByTagName('a'); // test the array against onclick event for (var i = 0, j = a.length; i function changeTitle2(){ // find the link var a = document.getElementById('action_link'); // onclick event a.onclick = function() { try{ // change title value this.title = 'This unique click happened as well!'; // or use setAttribute() method like this /* this.setAttribute('title', 'This unique click happened as well!'); */ // disable default link action return false; } // clear memory leaks with try-finally block finally{a = null;} } } window.onload = function() { changeTitle1(); //changeTitle2(); } <style type="text/css" media="screen"> #home #current-home a, #contact #current-contact a, #about #current-about a {/* declarations to style the current state */} </style> </head> <body id="home">  <a href="#" title="Home" class="current-home">Home</a> <a href="#" title="Contact" class="current-contact">Contact</a> <a href="#" title="About us" class="current-about">About us</a>