На цьому уроці ми розглянемо властивості елемента (вузла), за допомогою яких Ви можете управляти його різними атрибутами: id. class. title. lang. tabIndex. dir і ін.
Властивості елемента, призначені для доступу до його атрибутам
Для роботи з атрибутами можна використовувати не тільки методи getAttribute (). setAttribute () і removeAttribute (). але і властивості, назви яких повторюють назви відповідних властивостей. Ці властивості можна використовувати не тільки для читання значень відповідних атрибутів, але і для зміни їх значень.
властивість className
Властивість className дозволяє встановити або отримати клас (класи) елемента (значення атрибута class).
Для того щоб елементу встановити кілька класів, їх необхідно розділити між собою за допомогою пробілу.
1. Отримати назва класу першого елемента р (індекс 0) в документі:
2. Замінити елементу, що має id = "myID". існуюче ім'я класу новим значенням:
3. Додати до елементу додатковий клас (без перезапису існуючих значень):
4. Змінити у елемента, що має id = "myID" і клас myStyle. розмір шрифту:
Властивість елемента id
Властивість id дозволяє встановити або отримати у елемента його ідентифікатор (значення атрибута id).
Значення атрибута id має бути унікальним на сторінці. Для отримання елемента в HTML документі по його id зазвичай використовують метод getElementById ().
Наприклад, для елемента, що має ідентифікатор myID. змінити значення атрибута id:
Наприклад, вивести в консоль ідентифікатори всіх елементів p в документі:
Властивість елемента title
Властивість title встановлює або повертає значення атрибута title у елемента. Атрибут title зазвичай використовується для завдання елементу додаткової інформації, яка відображається у вигляді підказки.
Наприклад, змінити title елемента, що має id = "myP":
Властивість елемента lang
Властивість lang встановлює або повертає значення атрибута lang у елемента. Атрибут lang використовується для того щоб вказати мову, якою написаний текст всередині елемента.
Наприклад, встановити всіх елементів p в документі lang = "ru":
Властивість елемента tabIndex
Властивість tabIndex встановлює або повертає значення атрибута tabindex у елемента. Атрибут tabindex визначає порядок переходу за елементами при натисканні на кнопку tab.
Наприклад, встановити порядок переходу за елементами a так, як вони зустрічаються в коді:
Властивість елемента dir
Властивість dir встановлює або повертає значення атрибута dir у елемента. Атрибут dir застосовується для вказівки напряму тексту в елементі. Крім атрибута dir. Ви також можете використовувати властивість style.direction. щоб встановити або отримати направлення тексту в елементі.
Властивість dir може приймати одне з трьох значень: ltr (за замовчуванням) - напрям тексту в елементі ліворуч направо, rtl - напрямок тексту в елементі справа наліво, auto - дозволяє браузеру самостійно управляти напрямком тексту в елементі (браузер задає напрямок тексту в елементі в залежності від його вмісту). Встановлювати значення "auto" рекомендується тільки в тому випадку, якщо вміст елемента заздалегідь не відомо.
Наприклад, отримати направлення тексту у елемента р. має id = "myP":
Наприклад, змінити напрямок тексту елемента р. має id = "myP":
Властивості для управління атрибутами, які існують тільки у певних видів елементів
Наприклад, у елемента (вузла) img. крім загальних властивостей id. className. title. які є у більшості елементів, є ще й інші специфічні для цього об'єкту властивості: src (джерело картинки), width (ширина картинки), height (висота картинки), alt (текст, який буде відображатися, якщо картинка не відображається або її показ відключений в настройках браузера) і ін.
У більшості випадків назва властивості для управління атрибутом елемента, збігається з назвою цього атрибута.
Наприклад, змінити ширину і висоту картинки, що має id = "myImg":
Наприклад, отримати у посилання, що має id = "myAnchor". значення атрибута href. Вивести його значення в елемент, який має id = "myP":
Наприклад, встановити елементу input. має id = "email". режим доступу тільки для читання.
- Змінити у всіх елементів a в документі значення атрибута target на "_blank";
- Приховати все зображення на сторінці, які мають ширину більше 600px.