Стили и классы
До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.
Как правило, существует два способа задания стилей для элемента:
- Создать класс в CSS и использовать его:
- Писать стили непосредственно в атрибуте style : .
JavaScript может менять и классы, и свойство style .
Классы – всегда предпочтительный вариант по сравнению со style . Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».
Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:
let top = /* сложные расчёты */; let left = /* сложные расчёты */; elem.style.left = left; // например, '123px', значение вычисляется во время работы скрипта elem.style.top = top; // например, '456px'
Мы также можем установить сразу несколько стилей для элемента, используя свойство cssText . Но с ним нужно быть осторожнее, т.к оно может как добавить стили к существующим, так и полностью перезаписать их на новые:
let top = /* сложные расчёты */; let left = /* сложные расчёты */; // полная перезапись стилей elem, используем = elem.style.cssText = ` top: $; left: $; `; // добавление новых стилей к существующим стилям elem, используем += elem.style.cssText += ` top: $; left: $; `; // если элементу уже заданы стили, которые мы хотим добавить (+=), // они будут перезаписаны на новые.
В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.
className и classList
Изменение класса является одним из наиболее часто используемых действий в скриптах.
Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа «class» не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class .
Поэтому для классов было введено схожее свойство «className» : elem.className соответствует атрибуту «class» .
Если мы присваиваем что-то elem.className , то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.
Для этого есть другое свойство: elem.classList .
elem.classList – это специальный объект с методами для добавления/удаления одного класса.
Так что мы можем работать как со строкой полного класса, используя className , так и с отдельными классами, используя classList . Выбираем тот вариант, который нам удобнее.
- elem.classList.add/remove(«class») – добавить/удалить класс.
- elem.classList.toggle(«class») – добавить класс, если его нет, иначе удалить.
- elem.classList.contains(«class») – проверка наличия класса, возвращает true/false .
Кроме того, classList является перебираемым, поэтому можно перечислить все классы при помощи for..of :
Свойство style
Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте «style» .
Свойства из одного слова записываются так же, с маленькой буквы:
background => elem.style.background top => elem.style.top opacity => elem.style.opacity
Для свойств из нескольких слов используется camelCase:
background-color => elem.style.backgroundColor z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth
document.body.style.backgroundColor = prompt('background color?', 'green');
Свойства с префиксом
Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.
button.style.MozBorderRadius = '5px'; button.style.WebkitBorderRadius = '5px';
Сброс стилей
Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.
Например, чтобы скрыть элемент, мы можем задать elem.style.display = «none» .
Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = «» .
// если мы запустим этот код, "мигнёт" document.body.style.display = "none"; // скрыть setTimeout(() => document.body.style.display = "", 1000); // возврат к нормальному состоянию
Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.
Следите за единицами измерения
Не забудьте добавить к значениям единицы измерения.
Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:
Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.
Вычисленные стили: getComputedStyle
Итак, изменить стиль очень просто. Но как его прочитать?
Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?
Свойство style оперирует только значением атрибута «style» , без учёта CSS-каскада.
Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.
Например, здесь style не может видеть отступы:
body Красный текст
…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.
Для этого есть метод: getComputedStyle .
getComputedStyle(element, [pseudo])
element Элемент, значения для которого нужно получить pseudo Указывается, если нужен стиль псевдоэлемента, например ::before . Пустая строка или отсутствие аргумента означают сам элемент.
Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.
body
Вычисленное (computed) и окончательное (resolved) значения
Есть две концепции в CSS:
- Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
- Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .
Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.
Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.
getComputedStyle требует полное свойство!
Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.
Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.
Стили, применяемые к посещённым :visited ссылкам, скрываются!
Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited .
Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.
JavaScript не видит стили, применяемые с помощью :visited . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.
Итого
Для управления классами существуют два DOM-свойства:
- className – строковое значение, удобно для управления всем набором классов.
- classList – объект с методами add/remove/toggle/contains , удобно для управления отдельными классами.
Чтобы изменить стили:
- Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте «style» . Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.
- Свойство style.cssText соответствует всему атрибуту «style» , полной строке стилей.
Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:
- Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style . Только для чтения.
Задачи
Создать уведомление
важность: 5
Напишите функцию showNotification(options) , которая создаёт уведомление: с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.
Пример объекта options :
// показывает элемент с текстом "Hello" рядом с правой верхней частью окна. showNotification(< top: 10, // 10px от верхней границы окна (по умолчанию 0px) right: 10, // 10px от правого края окна (по умолчанию 0px) html: "Hello!", // HTML-уведомление className: "welcome" // дополнительный класс для div (необязательно) >);
Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.
Классы
Классы в JavaScript были введены в ECMAScript 2015 и представляют собой синтаксический сахар над существующим в JavaScript механизмом прототипного наследования. Синтаксис классов не вводит новую объектно-ориентированную модель, а предоставляет более простой и понятный способ создания объектов и организации наследования.
Определение классов
На самом деле классы — это «специальные функции», поэтому точно также, как вы определяете функции (function expressions и function declarations), вы можете определять и классы с помощью: class declarations и class expressions.
Объявление класса
Первый способ определения класса — class declaration (объявление класса). Для этого необходимо воспользоваться ключевым словом class и указать имя класса (в примере — «Rectangle»).
class Rectangle constructor(height, width) this.height = height; this.width = width; > >
Подъём (hoisting)
Разница между объявлением функции (function declaration) и объявлением класса (class declaration) в том, что объявление функции совершает подъём (hoisting), в то время как объявление класса — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а код же вроде следующего сгенерирует исключение типа ReferenceError :
var p = new Rectangle(); // ReferenceError class Rectangle >
Выражение класса
Второй способ определения класса — class expression (выражение класса). Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.
// безымянный var Rectangle = class constructor(height, width) this.height = height; this.width = width; > >; console.log(Rectangle.name); // отобразится: "Rectangle" // именованный var Rectangle = class Rectangle2 constructor(height, width) this.height = height; this.width = width; > >; console.log(Rectangle.name); // отобразится: "Rectangle2"
Примечание: выражения класса подвержены тем же проблемам с подъёмом (hoisting), что и объявления класса.
Тело класса и задание методов
Тело класса — это часть кода, заключённая в фигурные скобки <> . Здесь вы можете объявлять члены класса, такие как методы и конструктор.
Строгий режим
Тела объявлений классов и выражений классов выполняются в строгом режиме (strict mode).
Constructor
Метод constructor — специальный метод, необходимый для создания и инициализации объектов, созданных, с помощью класса. В классе может быть только один метод с именем constructor . Исключение типа SyntaxError будет выброшено, если класс содержит более одного вхождения метода constructor .
Ключевое слово super можно использовать в методе constructor для вызова конструктора родительского класса.
Методы прототипа
class Rectangle constructor(height, width) this.height = height; this.width = width; > get area() return this.calcArea(); > calcArea() return this.height * this.width; > > const square = new Rectangle(10, 10); console.log(square.area); // 100
Статические методы и свойства
Ключевое слово static , определяет статический метод или свойства для класса. Статические методы и свойства вызываются без инстанцирования (en-US) их класса, и не могут быть вызваны у экземпляров (instance) класса. Статические методы, часто используются для создания служебных функций для приложения, в то время как статические свойства полезны для кеширования в рамках класса, фиксированной конфигурации или любых других целей, не связанных с реплецированием данных между экземплярами.
class Point constructor(x, y) this.x = x; this.y = y; > static displayName = "Точка"; static distance(a, b) const dx = a.x - b.x; const dy = a.y - b.y; return Math.hypot(dx, dy); > > const p1 = new Point(5, 5); const p2 = new Point(10, 10); p1.displayName; //undefined p1.distance; //undefined p2.displayName; //undefined p2.distance; //undefined console.log(Point.displayName); // "Точка" console.log(Point.distance(p1, p2)); // 7.0710678118654755
Привязка this в прототипных и статических методах
Когда статический или прототипный метод вызывается без привязки к this объекта (или когда this является типом boolean, string, number, undefined, null), тогда this будет иметь значение undefined внутри вызываемой функции. Поведение будет таким же даже без директивы «use strict» , потому что код внутри тела класса всегда выполняется в строгом режиме.
class Animal speak() return this; > static eat() return this; > > let obj = new Animal(); obj.speak(); // объект Animal let speak = obj.speak; speak(); // undefined Animal.eat(); // класс Animal let eat = Animal.eat; eat(); // undefined
Если мы напишем этот же код используя классы основанные на функциях, тогда произойдёт автоупаковка основанная на значении this, в течение которого функция была вызвана. В строгом режиме автоупаковка не произойдёт — значение this останется прежним.
function Animal() > Animal.prototype.speak = function () return this; >; Animal.eat = function () return this; >; let obj = new Animal(); let speak = obj.speak; speak(); // глобальный объект (нестрогий режим) let eat = Animal.eat; eat(); // глобальный объект (нестрогий режим)
Свойства экземпляра
Свойства экземпляра должны быть определены в методе класса:
class Rectangle < constructor(height, width) < this.height = height; this.width = width; >>
Статические (class-side) свойства и свойства прототипа должны быть определены за рамками тела класса:
Rectangle.staticWidth = 20; Rectangle.prototype.prototypeWidth = 25;
Определение полей
Предупреждение: Публичные и приватные поля — это экспериментальная особенность (stage 3), предложенная комитетом TC39 по стандартам языка Javascript. Поддержка браузерами ограничена, но это нововведение может быть использовано на моменте сборки, используя к примеру Babel.
Публичные поля
Используя Javascript синтаксис определения полей, приведённый выше пример может быть изменён следующим образом:
class Rectangle < height = 0; width; constructor(height, width) < this.height = height; this.width = width; >>
Как видно из примера, поля могут быть объявлены как со начальным значением, так и без него.
Более подробно об этом написано в публичные поля класса.
Приватные поля
Предыдущий пример может быть изменён следующим образом, используя приватные поля:
class Rectangle < #height = 0; #width; constructor(height, width) < this.#height = height; this.#width = width; >>
Приватные поля могут быть изменены или прочитаны только в рамках класса и не могут быть вызваны извне. Определяя вещи, которые не видны за пределами класса, вы гарантируете, что пользователи ваших классов не могут зависеть от внутренних компонентов, которые могут изменить версию на версию.
Примечание: Приватные поля могут быть объявлены только заранее в объявлении поля.
Приватные поля не могут быть созданы позже путём присваивания им значения, в отличии от обычных свойств.
Более подробно об этом написано в Приватные поля класса.
Наследование классов с помощью extends
Ключевое слово extends используется в объявлениях классов и выражениях классов для создания класса, дочернего относительно другого класса.
class Animal constructor(name) this.name = name; > speak() console.log(`$this.name> издаёт звук.`); > > class Dog extends Animal constructor(name) super(name); // вызывает конструктор super класса и передаёт параметр name > speak() console.log(`$this.name> лает.`); > > let d = new Dog("Митци"); d.speak(); // Митци лает
Если в подклассе присутствует конструктор, он должен сначала вызвать super, прежде чем использовать this.
Аналогичным образом можно расширять традиционные, основанные на функциях «классы»:
function Animal(name) this.name = name; > Animal.prototype.speak = function () console.log(`$this.name> издаёт звук.`); >; class Dog extends Animal speak() console.log(`$this.name> лает.`); > > let d = new Dog("Митци"); d.speak(); // Митци лает // Для аналогичных методов дочерний метод имеет приоритет над родительским.
Обратите внимание, что классы не могут расширять обычные (non-constructible) объекты. Если вам необходимо создать наследование от обычного объекта, в качестве замены можно использовать Object.setPrototypeOf() :
var Animal = speak() console.log(`$this.name> издаёт звук.`); >, >; class Dog constructor(name) this.name = name; > > // Если вы этого не сделаете, вы получите ошибку TypeError при вызове speak. Object.setPrototypeOf(Dog.prototype, Animal); let d = new Dog("Митци"); d.speak(); // Митци издаёт звук.
Species
Допустим, вам хотелось бы возвращать объекты типа Array в вашем производном от массива классе MyArray . Паттерн species позволяет вам переопределять конструкторы по умолчанию.
Например, при использовании таких методов, как map() , который возвращает конструктор по умолчанию, вам хотелось бы, чтобы они возвращали родительский объект Array вместо объекта MyArray . Символ Symbol.species позволяет это реализовать:
class MyArray extends Array // Изменить species на родительский конструктор Array static get [Symbol.species]() return Array; > > var a = new MyArray(1, 2, 3); var mapped = a.map((x) => x * x); console.log(mapped instanceof MyArray); // false console.log(mapped instanceof Array); // true
Обращение к родительскому классу с помощью super
Ключевое слово super используется для вызова функций на родителе объекта.
class Cat constructor(name) this.name = name; > speak() console.log(`$this.name> издаёт звук.`); > > class Lion extends Cat speak() super.speak(); console.log(`$this.name> рычит.`); > > let l = new Lion("Фаззи"); l.speak(); // Фаззи издаёт звук. // Фаззи рычит.
Mix-ins
Абстрактные подклассы, или mix-ins, — это шаблоны для классов. У класса в ECMAScript может быть только один родительский класс, поэтому множественное наследование (к примеру, от tooling classes) невозможно. Функциональность должен предоставлять родительский класс.
Для реализации mix-ins в ECMAScript можно использовать функцию, которая в качестве аргумента принимает родительский класс, а возвращает подкласс, его расширяющий:
var calculatorMixin = (Base) => class extends Base calc() > >; var randomizerMixin = (Base) => class extends Base randomize() > >;
Класс, использующий такие mix-ins, можно описать следующим образом:
class Foo > class Bar extends calculatorMixin(randomizerMixin(Foo)) >
Спецификации
| Specification |
ECMAScript Language Specification
# sec-class-definitions |
Совместимость с браузерами
BCD tables only load in the browser
Повторное определение класа
Класс не может быть переопределён. Попытка этого приведёт к SyntaxError .
Если мы запускаете код в веб браузере, к примеру в Firefox Web Console (Tools > Web Developer > Web Console) и вы используете (‘Run’) определение класса с одним и тем же именем дважды, вы получите SyntaxError: redeclaration of let ClassName; . (Обсуждение по ошибке можно посмотреть в баг 1428672.) Chrome Developer Tools возвращает сообщение типа Uncaught SyntaxError: Identifier ‘ClassName’ has already been declared at :1:1 .
Смотрите также
- Функции
- Определение классов
- Выражение классов
- Публичные поля класса
- Приватные поля класса
- super
- Статья в блоге: «ES6 In Depth: Classes»
- Fields and public/private class properties proposal (stage 3)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
