В предыдущих примерах мы получали доступ к CSS-свойству через атрибут style. Логично предположить, что если мы укажем название другого атрибута, то получим доступ к его значению. Рассмотрим следующий пример.
<input type="button" value="Шире" onClick="document.getElementById('tab').width='750';">
<table border="1" cellspacing="0" cellpadding="3" id="tab">
<tr>
<td>На маленьком плоту...</td>
<td>Ну и пусть будет нелегким мой путь...</td>
</tr>
</table>
Этот код в действии
На маленьком плоту сквозь бури, дождь и грозы, Взяв только сны и грезы, и детскую мечту, Я тихо уплыву, лишь в дом проникнет полночь, Чтоб рифмами наполнить мир, в котором я живу.
| Ну и пусть будет нелегким мой путь, Тянут ко дну боль и грусть, Прежних ошибок груз. Но мой плот, свитый из песен и слов, Всем моим бедам назло Вовсе не так уж плох.
|
В обработчике события с помощью метода getElementById происходит обращение к таблице по её идентификатору tab, затем к её ширине width и задаётся новое значение 700.
Таким образом, осуществляется доступ к любому атрибуту.
Задание 2
Разместите на странице картинку и две кнопки: “Крупно” и “Обычно”. Одна из них должна увеличивать картинку вдвое, а другая — возвращать прежний размер.