Для манипулирования с атрибутом title, можно воспользоваться стандартным методом attr(). С помощью этого метода, можно считать текущее значение атрибута title, а можно записать новое значение.
Считывание атрибута title
<!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(titleFunc); function titleFunc() { // Находим элемент #mydiv, считываем содержание атрибута title и сохраняем его в переменную myTitle var myTitle = $('#mydiv').attr("title"); // Выводим переменную myTitle в тег с id="result" $('#result').html(myTitle); } </script> </head> <body> <div title="old title" id="mydiv"> </div> <!-- Тег для вывода переменной myTitle --> <div id="result"> </div> </body> </html>
Перенесите данный код в браузер и проверьте, что все работает корректно. Результирующий код должен получиться таким:
<div title="old title" id="mydiv"></div> <div id="result">old title</div>
В качестве закрепления материала, предлагаю добавить еще один элемент с title, считать его и вывести на экран.
Запись в атрибут title
Запись в атрибут title такая же простая, как и считывание значения. В методе attr() ,будет использоваться не один аргумент, а два. Первый аргумент отвечает за атрибут, а второй присваивает атрибут значение.
attr( «имя атрибута», «значение» )
attr( attributeName, value )
<!DOCTYPE html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(titleFunc); function titleFunc() { // Находим элемент #mydiv, заменяем содержание атрибута title на "NEW title" $('#mydiv').attr("title", "NEW title"); // Заносим в переменную myTitle значение атрибута title var myTitle = $('#mydiv').attr("title"); // Выводим переменную myTitle в тег с id="result" $('#result').html(myTitle); } </script> </head> <body> <div title="old title" id="mydiv"> </div> <!-- Тег для вывода переменной myTitle --> <div id="result"> </div> </body> </html>
В результате выполнения получим:
<div title="NEW title" id="mydiv"></div> <div id="result">NEW title</div>
А вот и не большой тест:
Теперь по работе с атрибутом title вы Гуру!
Добавить комментарий