Атрибут id тега <img>
Описание
Атрибут id задаёт уникальный идентификатор элементу <img>. Этот идентификатор используется для стилизации через CSS, обращения через JavaScript и как якорная ссылка.
<img
src="logo.png"
alt="Логотип компании"
id="main-logo"
width="200">
Основные применения:
| Применение | Пример | Описание |
|---|---|---|
| CSS-стилизация | #main-logo { border: none; } |
Уникальное оформление элемента |
| JavaScript-доступ | document.getElementById('main-logo') |
Прямой доступ к изображению |
| Якорные ссылки | <a href="#main-logo">К логотипу</a> |
Быстрая навигация к изображению |
Пример взаимодействия через JavaScript:
<img
id="interactive-img"
src="default.jpg"
alt="Интерактивное изображение"
width="400">
<button onclick="changeImage()">Сменить изображение</button>
<script>
function changeImage() {
const img = document.getElementById('interactive-img');
img.src = 'new-image.jpg';
img.alt = 'Новое изображение';
}
</script>
Рекомендации по именованию:
- Используйте осмысленные имена (не "image1", "img2")
- Придерживайтесь одного стиля (camelCase или kebab-case)
- Избегайте цифр в начале имени
- Не используйте зарезервированные слова ("image", "logo")
Пример с CSS и JavaScript:
<style>
#zoomed-image {
transition: transform 0.3s ease;
cursor: zoom-in;
}
#zoomed-image.zoomed {
transform: scale(1.5);
cursor: zoom-out;
}
</style>
<img
id="zoomed-image"
src="product.jpg"
alt="Демонстрация товара"
onclick="toggleZoom()">
<script>
function toggleZoom() {
document.getElementById('zoomed-image').classList.toggle('zoomed');
}
</script>
Ограничения и совместимость:
- Поддерживается всеми браузерами
- Значение должно быть уникальным в пределах документа
- Чувствительность к регистру зависит от DOCTYPE
- Не рекомендуется для стилизации (лучше использовать классы)
Примечание: Хотя атрибут id очень полезен для JavaScript-взаимодействий, избегайте его использования для стилизации. Для оформления предпочтительнее применять классы, оставляя идентификаторы для специальных случаев и логики приложения.