У сьогоднішній статті по документації jQuery буде розібрана робота бібліотеки з CSS властивостями.
Ми будемо вчитися отримувати і встановлювати значення CSS-властивостей для елементів, в тому числі працювати з шириною і висотою, а також визначати позицію елемента.
.css (name)
Повертає значення для css-властивості, зазначеного в name, для першого елемента в наборі.
У цьому прикладі, щоб отримати доступ до css-властивості background-color потрібно всього лише клікнути по елементу div.
Відкрийте приклад в новому вікні і подивіться вихідний код
.css (properties)
Повертає: jQuery Object
Встановлює значення для css-властивостей всіх елементів набору, використовуючи об'єкт, що складається з пар ключ / значення.
Це найкращий спосіб встановити значення відразу для декількох css-властивостей всіх елементів набору.
Подивіться цей приклад.
Якщо покажчик миші проходить над параграфом, то для цього параграфа буде встановлено жовтий фон і жирне накреслення тексту.
Коли ж покажчик миші виходить за межі параграфа - фон змінюється на сірий, накреслення тексту стає нормальним.
Відкрийте приклад в новому вікні і подивіться вихідний код
css (name, value)
Повертає: jQuery Object
Встановлює значення одного css-властивості для всіх елементів набору.
Якщо в якості значення будь-якого з css-властивостей використовується число, воно автоматично конвертується в значення в пікселах.
У цьому прикладі, для того щоб змінити колір тексту будь-якого параграфа, використовується події mouseover. mouseout.
Відкрийте приклад в новому вікні і подивіться вихідний код
Для першого елемента в наборі отримує поточні відступи координати щодо початку сторінки.
.position ()
Для першого елемента в наборі отримує поточні відступи координати щодо щодо найближчого батька у якого заданий тип позиціонування
(Css-властивість position одно relative або absolute або fixed).
Повертається об'єкт, що містить значення (цілі числа) відступів зверху і зліва.
Цей метод працює тільки з видимими елементами.
Відкрийте приклад в новому вікні і подивіться вихідний код
Повертає: Integer
Отримує поточне значення висоти в пікселях для першого елемента в наборі.
Цей метод також дозволяє знайти висоту для window і document.
У цьому прикладі ми отримуємо кілька значень висоти.
Функція showHeight допоміжна, просто для виведення значень в елемент div.
Відкрийте приклад в новому вікні і подивіться вихідний код
height (val)
Повертає: jQuery Object
Встановлює висоту в CSS-властивості для кожного елемента в наборі.
Якщо одиниці виміру не визначені однозначно (наприклад em або%), тоді значення встановлюється в px.
У цьому прикладі при натисканні на елементі div, для нього встановлюється висота в 30px і заодно змінюється колір.
Відкрийте приклад в новому вікні і подивіться вихідний код
Повертає: Integer
Отримує поточне значення ширини в пікселях для першого елемента в наборі.
Цей метод також дозволяє знайти ширину для window і document.
У цьому прикладі ми отримуємо кілька значень висоти. Функція showWidth допоміжна, просто для виведення значень в елемент div.
Відкрийте приклад в новому вікні і подивіться вихідний код
.width (val)
Повертає: jQuery Object
Встановлює ширину в CSS-властивості для кожного елемента в наборі.
Якщо одиниці виміру не визначені однозначно (наприклад em або%), тоді значення встановлюється в px.
У цьому прикладі при натисканні на елементі div, для нього встановлюється ширина в 30px і заодно змінюється колір.
Відкрийте приклад в новому вікні і подивіться вихідний код
.scrollTop () .scrollLeft ()
За допомогою цих функцій можна отримати або змінити величину вертикального або горизонтального скролінгу елементів на сторінці. Приклад використання методу для створення посилання "наверх" Приклад посилання наверх
Величина прокрутки вимірюється кількістю пікселів за межами екрану:
