Question

我有一个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>

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代码：

写document.getElementById（“link”）。title而不是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

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

为您的标记添加id，例如myLink

然后使用JQuery你可以编写

$(document).ready(function () {

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

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

    });

});

Answer 8

正如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 9

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

顾名思义，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 10

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

Answer 11

我正在解决2个问题：

鼠标悬停时标题发生变化，但代码中没有标题：
...... ＆LT; a class =“a”href =“＃”name =“home”title =“Home”＆gt; Home
...... document.getElementsByName（“home”）[0] .title =“标题已更改”; //工作
如何更改链接的类别：

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

谢谢！

Answer 12

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

我的观察：

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



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:


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

长版：http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ （也请阅读评论）

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

如何在<a> tag using JavaScript?</a>中更改标题属性

12 个答案: