JavaScript заметки

2022-05-27 16:01:22 Proglib теперь в Telegram!

Это полноценное медиа для айтишников: разборы кода, обзоры приложений, фишки по трудоустройству и реальные вакансии.

Если хотите подтянуть скилл и найти хорошую работу, подписывайтесь: @proglib_com Открыть/Комментировать

2022-05-27 00:10:14 Вычисленные стили: getComputedStyle

Что, если нам нужно, скажем, увеличить отступ на 20px? Для начала нужно его текущее значение получить.

Для этого есть метод: getComputedStyle(element, [pseudo]).

Результат вызова – объект со стилями, похожий на elem.style, но с учётом всех CSS-классов.

#браузер #документ #стили_классы Открыть/Комментировать

2022-05-26 22:09:11 Ты кодишь неправильно!

Слишком сложно. Слишком долго. Слишком скучно.

Держи лёгкий способ:
Заходишь в IT Guides;
Ежедневно впитываешь самое важное о программировании;
Пишешь код за секунду!

Невозможно? А ты сначала попробуй — IT Guides Открыть/Комментировать

2022-05-26 19:05:23 Вычисленные стили: метод в лоб

Итак, изменить стиль очень просто. Но как его прочитать?

Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?

Свойство style оперирует только значением атрибута "style", без учёта CSS-каскада.

Поэтому, используя elem.style, мы не можем прочитать ничего, что приходит из классов CSS.

Например, здесь style не может видеть отступы.

#браузер #документ #стили_классы Открыть/Комментировать

2022-05-26 17:05:03 ​​Три закрытых канала для фронтендера + бонус.

@frontend_tests — сборник задач (с их разбором) для прокачки теоретических знаний и подготовки к собеседованиям.

@on_the_frontend — дайджест самых актуальных статей по фронтенду.

@build_html — сотни бесплатных макетов для верстки на русском языке.

@mobileux — уникальная подборка интерфейсов для мобильных приложений.

Доступ открыт на 3 дня, кто успеет подписаться, останется навсегда. Открыть/Комментировать

2022-05-25 14:49:51 Следите за единицами измерения

Не забудьте добавить к значениям единицы измерения.

Например, мы должны устанавливать 10px, а не просто 10 в свойство elem.style.top. Иначе это не сработает.

Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.

#браузер #документ #стили_классы Открыть/Комментировать

2022-05-25 12:49:25 БЕСПЛАТНЫЙ КУРС по дизайну с нуля. Вместе сделаем 3+ мощных кейса тебе в портфолио.

5 дней в сильном комьюнити с живым чатом и проверкой ДЗ от топ дизайнеров.

Вы узнаете как делать лучший дизайн сайтов, презентаций, постов, креативов и зарабатывать на этом от 100к/мес.

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

Переходите в чат, там вас уже ждут кураторы, уроки, домашки и живое общение! - https://t.me/YudaevSchool2_bot?start=ml2
И всё это бесплатно, кликайте по ссылке пока есть места - https://t.me/YudaevSchool2_bot?start=ml2 Открыть/Комментировать

2022-05-24 20:03:00 Полная перезапись style.cssText

Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style="color: red; width: 100px", потому что div.style – это объект, и он доступен только для чтения.

Для задания нескольких стилей в одной строке используется специальное свойство style.cssText

Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль.

То же самое можно сделать установкой атрибута: div.setAttribute('style', 'color: red...').

#браузер #документ #стили_классы Открыть/Комментировать

2022-05-24 17:02:39 Знание SQL — must have в сфере аналитики

На бесплатном курсе-симуляторе в Нетологии «Введение в SQL и работу с базой данных» вы  изучите основы SQL, научитесь подключаться к реляционным базам данных, делать SQL-запросы и создавать простые отчёты и аналитику. Все задания основаны на реальных кейсах из практики аналитиков. Курс подойдет всем, кто работает с данными или хочет начать.

Записаться → https://netolo.gy/inG Открыть/Комментировать

2022-05-24 12:02:38 Сброс стилей

Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.

Например, чтобы скрыть элемент, мы можем задать elem.style.display = "none".

Затем мы можем удалить свойство style.display, чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = "".

Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.

#браузер #документ #стили_классы Открыть/Комментировать