我有一个 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>
【问题讨论】：
标签： javascript html dom
我假设这只是您想要做的一个简化示例，因为更改链接 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>
当然，正如格兰特所建议的那样，您也可以将 title 值传递给函数，但是您最好一直执行内联版本并跳过该函数。
【讨论】：
去掉 SCRIPT 元素中的 BR 标签，并将工具函数重写为：
function tool(){
document.getElementsByName("link")[0].title = "after click";
}
它会起作用的。但是，这不是最佳方式。如果为字段分配 id 参数，至少可以使用 document.getElementById(..)，或者更好的是，使用 jQuery 之类的库。
【讨论】：
使用jquery，可以编写如下命令：
$("a#link").attr("title","after click");
【讨论】：
您可以在要更改的元素上使用 setAttribute(attributeName, value)。
document.getElementById('link').setAttribute('title', 'after click');
这也适用于自定义属性
【讨论】：
document.getElementsByName("link").title = "after click";
【讨论】：
document.getElementById('Id here').title = "after Click";这样使用Id
更正 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/
【讨论】：
我会使用http://jquery.com/ 下载它并添加一个脚本引用
给你的标签一个id，比如myLink
然后用JQuery就可以写了
$(document).ready(function () {
$("#myLink").click(function(){
$("#myLink").attr("title","after click");
});
});
【讨论】：
正如waxwing建议的那样，最好使用getElementById()
<a id="aLink" href="http://www.bla.com" title="hello">link</a>
<script>
function tool(){
document.getElementById('aLink').title = "after click";
}
</script>
【讨论】：
您提供的代码有两个问题：
顾名思义，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>
【讨论】：
<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>
【讨论】：
我在这里解决 2 个问题：
鼠标悬停时标题已更改，但代码中没有：
...
首页
...
document.getElementsByName("home")[0].title = "标题已更改"; // 在职的
如何更改链接的类：
FROM：首页
收件人：首页
document.getElementsByName("home")[0].class= "current"; // 不工作
谢谢！
【讨论】：
标题已更改，但仅在生成的代码中。这就是 JS 的工作方式——它只处理演示文稿。尝试使用 Firefox 的 Webdeveloper 工具栏，因为它可以选择显示生成的代码和原始代码。如果您需要任何其他方式，请考虑使用一些服务器端编程。
我的观察：
切勿将 JS 与 HTML 混合使用。如果你需要更新你的代码，它会容易得多——搜索“unobtrusive JS”来更好地掌握这个问题。因此，<a href="javascript:..."> 或 <a href="#" onclick="..."> 是一种糟糕的编码习惯。
不要将大型 JS 包（如 JQuery）用于简单任务。只有充分发挥它们的潜力，它们才是好的。
您真的需要即时执行 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();
}
@spiro：关于您关于链接当前状态和更改其 CSS 的第二个问题......好吧，使用 CSS :)
短版：
首页 联系方式 关于我们长版：http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ （也请阅读 cmets）
注意：如果您已经在当前页面，是否需要显示链接？
【讨论】：
function changeTitle1(){ // 找到链接数组 var a = document.getElementsByTagName('a'); // 针对 onclick 事件测试数组 for (var i = 0, j = a.length; i