如何使用JavaScript更改<a>标签中的title属性？

Question

我有一个html标签，最初我想要“标题”属性中提到的工具提示名称。 点击链接后，我想要不同的工具提示名称。 我使用了以下代码，但它无法正常工作。 谁能帮帮我吗？

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

Answer 1

我假设这只是您想要做的简化示例，因为更改链接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>

当然，正如格兰特建议的那样，你也可以将标题值传递给函数，但是你最好只是一直使用内联版本并跳过函数。

Answer 2

摆脱SCRIPT元素中的BR标记，并将工具函数重写为：

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

它会起作用。 但是，这不是最佳方式。 如果为字段分配id参数，至少可以使用document.getElementById（..），甚至更好，使用像jQuery这样的库。

Answer 3

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

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

Answer 4

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

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

这也适用于自定义属性

Answer 5

document.getElementsByName("link").title = "after click";

Answer 6

更正Jason代码：

write document.getElementById（“link”）。title titleof document.getElementsByName（“link”）。title。

我在IE7和Firefox 3上测试过它。

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

您还可以使用javascript浏览本文以创建漂亮的工具提示：http：//devirtu.com/2008/08/14/how-to-make-tooltip-with-javascript/

Answer 7

我在这里处理2个问题：

鼠标悬停时标题会更改，但代码中不会更改：
...
<a class =“a”href =“＃”name =“home”title =“Home”> Home
...
document.getElementsByName（“home”）[0] .title =“标题已更改”; //工作
如何更改链接的类：

FROM：<a class =“a”href =“＃”name =“home”title =“Home”> Home
TO：<a class =“current”href =“＃”name =“home”title =“Home”> Home
document.getElementsByName（“home”）[0] .class =“current”; //不工作

谢谢！

Answer 8

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

我的观察：

切勿将JS与HTML混合使用。 如果你需要更新你的代码，它会更容易 - 搜索“不显眼的JS”以更好地掌握这个问题。 <a href="javascript:...">或<a href="#" onclick="...">是一种糟糕的编码习惯。
不要像JQuery那样使用大型JS包来完成简单的任务。 只有充分发挥其潜力，它们才是好的。
你真的需要动态执行HTML操作吗？为什么？ 标题工具提示对您的代码很重要吗？ 谁应该从中受益：最终用户还是管理员？ 可访问性怎么样？
第一个代码块的INFO：
如果我们不知道要使用哪个链接，我们必须收集所有这些链接
然后针对onclick事件测试集合
建议：
- 使用更好的事件处理程序;）
- 仅从页面的特定部分（主要或导航div）收集链接以提高速度
注意事项：
这可能会降低页面渲染速度
title属性是硬编码的，所有链接都相同



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

INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:
INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:
INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:
- INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:
INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:
INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:
INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:


<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"> <!-- OR body id="contact" OR body id="about" -->
    <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>

 INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:

INFO on the second code block: We know exactly what link to check Suggestion: use a better event handler ;) CAVEATS: this can only be used on a single element title attribute is hardcoded and same for all links 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(); } @spiro: Regarding your second question about links current state and changing their CSS... well, use CSS :) Short version:

 <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"> <!-- OR body id="contact" OR body id="about" --> <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>

长版： http ： //www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ （同时阅读评论）

注意：如果您已经在当前页面上，是否有必要显示链接？

Answer 9

我会使用http://jquery.com/下载它并添加一个脚本引用

为你的标签添加一个id，例如myLink

然后使用JQuery你可以写

$(document).ready(function () {

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

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

    });

});

Answer 10

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

<a id="aLink" href="http://www.bla.com" title="hello">link</a>
 <script>

function tool(){
document.getElementById('aLink').title = "after click";
}

</script>

Answer 11

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

顾名思义，documentent.getElementById按ID查找内容，而不是名称。 您需要在该锚标记中提供ID。 将您的链接更改为<a href="javascript:tool()" id="link" name="link" title="before click">click here</a>
你正在向documentent.getElementById提供一个名为“link”的变量的内容，这个变量可能不存在。 你实际上想要传递一个需要引号的文字字符串。 将该调用更改为document.getElementById("link").title = "after click";

总而言之，这就是您的代码的样子：

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

Answer 12

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

如何使用JavaScript更改<a>标签中的title属性？

问题描述

12 个解决方案

解决方案1
20 2009-05-22 14:03:05

解决方案2
12 2009-05-22 12:17:22

解决方案3
5 2009-05-22 12:14:05

解决方案4
2 2009-05-22 12:16:41

解决方案5
1 2009-05-22 12:16:38

解决方案6
1 2009-05-22 13:23:29

解决方案7
0

解决方案8
0

解决方案9
0 2009-05-22 12:17:37

解决方案10
0

解决方案11
0 2009-05-22 13:03:51

解决方案12
0

如何使用JavaScript更改<a>标签中的title属性？

问题描述

12 个解决方案

解决方案1 20 2009-05-22 14:03:05

解决方案2 12 2009-05-22 12:17:22

解决方案3 5 2009-05-22 12:14:05

解决方案4 2 2009-05-22 12:16:41

解决方案5 1 2009-05-22 12:16:38

解决方案6 1 2009-05-22 13:23:29

解决方案7 0

解决方案8 0

解决方案9 0 2009-05-22 12:17:37

解决方案10 0

解决方案11 0 2009-05-22 13:03:51

解决方案12 0

解决方案1
20 2009-05-22 14:03:05

解决方案2
12 2009-05-22 12:17:22

解决方案3
5 2009-05-22 12:14:05

解决方案4
2 2009-05-22 12:16:41

解决方案5
1 2009-05-22 12:16:38

解决方案6
1 2009-05-22 13:23:29

解决方案7
0

解决方案8
0

解决方案9
0 2009-05-22 12:17:37

解决方案10
0

解决方案11
0 2009-05-22 13:03:51

解决方案12
0