Глава 2. Зміна стилів різних об'єктів
В цьому розділі триває ознайомлення з різними способами зміни стилів різних об'єктів. Як ми вже з'ясували, Dynamic HTML дозволяє змінювати різні атрибути об'єктів, наприклад, атрибут SRC у об'єкта
Зміна вмісту IFRAME
function change_background (color) document.frames.myiframe.document.body.style.backgroundColor = color;
>
Тепер color пишеться без лапок, тому-що це не назва кольору, а ім'я змінної, аргументу функції. Як цього аргументу ви можете передавати будь-коректне назву кольору. Я ж казав, що функції дозволяють діяти дуже гнучко!
У першому розділі ви познайомилися з поняттям класів, як об'єднань аттрибутов об'єкта. У цьому розділі ми продовжуємо їх обговорення.
Є два способи завдання стилю об'єкта: перший - це безпосередньо, наприклад, this.style.color = 'red' або document.all.myHeading.style.fontSize = '20px'. Все це приклади прямого доступу до властивості об'єкта.
Другий спосіб - це використання класів. Використовуючи їх, ви можете задати відразу кілька рядків. Так чому класи? Коли у вас на сторінці є безліч об'єктів приблизно однакового призначення, ви можете використовувати для них глобальні стильові установки, застосовуючи для всіх цих об'єктів один стиль. Кожен об'єкт має атрибут, який пов'язує його з певним класом. Через цей атрибут легко задати стиль об'єкта, зіставляючи його певного класу. Крім того, ви можете динамічно змінювати атрибут класу, відповідно змінюючи стиль об'єкта.
Цей приклад демонструє, як можна виробляти динамічну зміну класу.
Наведи на мене миша, щоб подивитися, як класи динамічно змінюються
Визначено два класи під іменами textRed і textBlack. При ініціалізації, об'єкту
присвоюється клас textBlack, зверніть увагу, що в цьому випадку використовується атрибут class, а ім'я класу пишеться без лапок. Це відбувається тому, що цей код є частиною мови HTML, а ось коли ім'я класу треба змінити, в подвійних лапках знаходиться частина Script-мови, тому використовується атрибут className, і ім'я класу пишеться в одинарних лапках.
За допомогою класів ви можете змінювати всі атрибути стилю за винятком позиціонування (position). Ви не можете визначити стиль позиціонування: абсолютний або непозіціонірованний інакше, як через прямий код HTML.
Коли ви привласнюєте значення Атрибути, пам'ятайте, що ці значення завжди - рядки. Тому, ви не можете маніпулювати значеннями властивостей в математичному сенсі. І спеціально для цього було введено кілька властивостей, значення яких - цілі числа.
Якщо властивість передбачає деяку різноманітність величин, ви можете вказувати величину, в якій вводите значення. У наступних прикладах використовуються величини points і pixels. Вони задаються відповідно покажчиками pt і px.
Якщо ви не задаєте покажчик, використовується значення за замовчуванням. Є одна перевага цього: ви можете вказати значення властивості, як ціле число. Дві наступні рядки ідентичні:
document.all.MyElement.style.fontSize = "72";
document.all.MyElement.style.fontSize = 72;