Как изменить атрибут title в теге <a>с помощью JavaScript?

У меня есть тег 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>

Ответы

Ответ 1

Я предполагаю, что это просто упрощенный пример того, что вы хотите сделать, поскольку изменение ссылки onclick можно выполнить inline:

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

Естественно, как предлагает Грант, вы также можете передать значение названия функции, но тогда вам действительно лучше всего делать встроенную версию и пропускать эту функцию.

Ответ 2

Избавьтесь от тега BR внутри вашего элемента SCRIPT и перепишите функцию инструмента:

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

и он будет работать. Однако это не оптимальный способ. Если вы назначаете параметр id в поле, вы можете хотя бы использовать document.getElementById(..) или даже лучше использовать библиотеку, например, jQuery.

Ответ 3

Используя jquery, вы можете написать следующую команду:

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

Ответ 4

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

Ответ 5

Вы можете использовать setAttribute (attributeName, value) для элемента, который вы хотите изменить.

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

Это также работает для пользовательских атрибутов

Ответ 6

Исправление кода Jason:

write document.getElementById( "ссылка" ). title вместо document.getElementsByName( "ссылка" ). 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/

Ответ 7

Я бы использовал http://jquery.com/ загрузить его и добавить ссылку script на него

Дайте тегу идентификатор, например myLink

Затем, используя JQuery, вы можете написать

$(document).ready(function () {

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

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

    });

});

Ответ 8

Как показывает воск, лучше использовать getElementById()

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

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

</script>

Ответ 9

В вашем поставляемом коде две ошибки:

Как следует из названия, documentent.getElementById ищет вещи по идентификатору, а не по имени. Вам нужно будет указать идентификатор в теге привязки. Измените ссылку на <a href="javascript:tool()" id="link" name="link" title="before click">click here</a>
Вы загружаете documentent.getElementById содержимое переменной, называемой "ссылка", которая, по-видимому, не существует. Вы действительно хотели передать литеральную строку, которой нужны кавычки. Измените этот вызов на 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>

Ответ 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>

Ответ 11

Я занимаюсь двумя вопросами здесь:

Название изменяется при наведении указателя мыши, но не в коде:
...
< a class= "a" href= "#" name= "home" title= "Главная" > Главная страница ...
document.getElementsByName( "home" ) [0].title= "Название изменено";//за работой
Как изменить класс ссылки:

FROM: < a class= "a" href= "#" name= "home" title= "Главная" > Главная страница TO: < a class= "current" href= "#" name= "home" title= "Главная" > Главная
document.getElementsByName( "home" ) [0].class= "current";//не работает

Спасибо!

Ответ 12

Название изменилось, но только в сгенерированном коде. Так работает JS - он работает только с презентацией. Попробуйте использовать панель инструментов Webdeveloper для Firefox, поскольку она имеет возможность показывать сгенерированный код вместе с оригинальным. Если вам нужен какой-либо другой способ, подумайте об использовании программирования на стороне сервера.

Мои наблюдения:

Никогда не смешивайте JS с HTML. Если вам нужно обновить свой код, это будет намного проще - найдите "ненавязчивый JS", чтобы лучше понять проблему. <a href="javascript:..."> или <a href="#" onclick="...">, следовательно, является плохой практикой кодирования.
Не используйте большие JS-пакеты, такие как JQuery, для простых задач. Они хороши только при полном их использовании.
Вам действительно нужно выполнять манипуляции с 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: Что касается вашего второго вопроса о текущем состоянии ссылок и изменении их CSS... ну, используйте CSS:)

Краткая версия:

<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/ (читайте также комментарии)

Примечание: необходимо ли отображать ссылку, если вы уже находитесь на текущей странице?