JavaScript заметки

Вычисленные стили: getComputedStyle Что, если нам нужно, скажем, увеличить отступ на 20px? Для начала нужно его текущее значение получить. Для этого есть метод: getComputedStyle(element, [pseudo]). Результат вызова – объект со стилями, похожий на elem.style, но с учётом всех CSS-классов. #браузер #документ #стили_классы

Релокейт, удалёнка и высокая зарплата для фронтендеров. Специально для Вас, собираем топовые вакансии для фронтов на канале @job_frontend. Подпишись чтобы не упустить свой шанс получить лучший оффер!

Вычисленные стили: метод в лоб Итак, изменить стиль очень просто. Но как его прочитать? Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать? Свойство style оперирует только значением атрибута "style", без учёта CSS-каскада. Поэтому, используя elem.style, мы не можем прочитать ничего, что приходит из классов CSS. Например, здесь style не может видеть отступы. #браузер #документ #стили_классы

Следите за единицами измерения Не забудьте добавить к значениям единицы измерения. Например, мы должны устанавливать 10px, а не просто 10 в свойство elem.style.top. Иначе это не сработает. Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него. #браузер #документ #стили_классы

Полная перезапись style.cssText Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style="color: red; width: 100px", потому что div.style – это объект, и он доступен только для чтения. Для задания нескольких стилей в одной строке используется специальное свойство style.cssText Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль. То же самое можно сделать установкой атрибута: div.setAttribute('style', 'color: red...'). #браузер #документ #стили_классы

Верстальщики, ловите лайфхак: Все макеты для верстки уже нашли и бесплатно выкладывают на канале Макеты Figma. Макеты для верстки: @figma_templates

Сброс стилей Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его. Например, чтобы скрыть элемент, мы можем задать elem.style.display = "none". Затем мы можем удалить свойство style.display, чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = "". Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было. #браузер #документ #стили_классы

Element style Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте "style". Установка стиля elem.style.width="100px" работает так же, как наличие в атрибуте style строки width:100px. Для свойства из нескольких слов используется camelCase. #браузер #документ #стили_классы

Испытайте себя в роли Frontend-разработчика🤘 Давайте вошли и вышли, приключение на 14 дней. Даём только мясную и прикладную информацию. Никакой воды и траты времени! По окончании вы уже владеете базовым знанием языка и даже напишете собственную программу! Начало 13 октября. Успейте присоединиться 🙌

classList elem.classList – это специальный объект с методами для добавления/удаления одного класса. Так что мы можем работать как со строкой полного класса, используя className, так и с отдельными классами, используя classList. Выбираем тот вариант, который нам удобнее. Методы classList: elem.classList.add/remove("class") – добавить/удалить класс. elem.classList.toggle("class") – добавить класс, если его нет, иначе удалить. elem.classList.contains("class") – проверка наличия класса, возвращает true/false. #браузер #документ #стили_классы

className Изменение класса является одним из наиболее часто используемых действий в скриптах. Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class. Поэтому для классов было введено схожее свойство "className": elem.className соответствует атрибуту "class". #браузер #документ #стили_классы

Разрабатываешь сайты в Visual Studio Code и еще не подписан на VSCoder? Срочно исправляй! Visual Studio Code — это оптимизированный редактор кода с поддержкой таких операций разработки, как отладка, выполнение задач и контроль версий. Имеет множество плагинов, которые собраны у нас на канале!

Стили и классы Как правило, существует два способа задания стилей для элемента: 1) Создать класс в CSS и использовать его: <div class="..."> 2) Писать стили непосредственно в атрибуте style: <div style="...">. JavaScript может менять и классы, и свойство style. Классы – всегда предпочтительный вариант по сравнению со style. Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться». Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript. В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение. #браузер #документ #стили_классы

Несколько слов о «document.write» Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write. Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ. Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его. В современных скриптах он редко встречается из-за следующего важного ограничения: Вызов document.write работает только во время загрузки страницы. #браузер #документ #изменение

Бывший сотрудник Ozon завел свой канал, где делится фишками и наработками которые помогут украсить сайт. И ничего сложного в этом нет, просто копируешь и вставляешь в свой код. Посмотреть можно тут.

Устаревшие методы вставки/удаления Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам. Сейчас уже нет причин их использовать, так как современные методы append, prepend, before, after, remove, replaceWith более гибкие и удобные. Мы упоминаем о них только потому, что их можно найти во многих старых скриптах: parentElem.appendChild(node) parentElem.insertBefore(node, nextSibling) parentElem.replaceChild(node, oldChild) parentElem.removeChild(node) #браузер #документ #изменение

DocumentFragment DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов. Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое. Например, getListContent ниже генерирует фрагмент с элементами <li>, которые позже вставляются в <ul> #браузер #документ #изменение

ТОП-20 макетов , которые дополнят Ваше портфолио Выучил верстку и тебе не хватает работ в портфолио? Ищешь макеты, но они все платные? Заходи на канал, каждый день публикуются макеты разной сложности, подойдет как новичку так и профи!

Клонирование узлов: cloneNode Как вставить ещё одно подобное сообщение? Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости). Иногда, когда у нас есть большой элемент, это может быть быстрее и проще. Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false), тогда клон будет без дочерних элементов. #браузер #документ #изменение

Удаление узлов Для удаления узла есть методы node.remove(). Например, сделаем так, чтобы наше сообщение удалялось через секунду. Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого. Все методы вставки автоматически удаляют узлы со старых мест. #браузер #документ #изменение