DOM JavaScript: стили и CSS-классы. Свойства style и classList. Управление CSS-переменными в JS.

✏️ We'll learn how to work with styles in JavaScript using the style property of DOM elements and how to get computed style values ​​using the getComputedStyle function. We'll also explore how to manage CSS classes using the classList property of DOM elements and its methods for adding, removing, toggling, and checking for the presence of a CSS class on an element. We'll also learn how to manage element CSS variables using JavaScript. 🔴 Timeline: ▶ 00:00​ | Introduction ▶ 00:22​ | Methods of Setting Styles ▶ 01:02​ | Setting Styles with the Style Property ▶ 01:48​ | Setting a Set of CSS Properties with the Style Property ▶ 03:04​ | Computed Style Values ​​— the getComputedStyle Function ▶ 05:20​ | Managing CSS Classes with JavaScript — the className and classList Properties ▶ 07:06 | Adding Classes to a DOM Element — the classList.add Method ▶ 07:39 | Removing Classes from a DOM Element — the classList.remove Method ▶ 08:03 | Adding or Removing a Class Based on a Condition — the classList.toggle Method ▶ 10:08 | Checking if a DOM Element Has a Class — the contains Method ▶ 10:28 | Managing CSS Variables with JavaScript — style.setProperty ▶ 11:51 | Conclusion 📚 Video links: ➖ JavaScript documentation from MDN: https://developer.mozilla.org/ru/docs... ➖ Russian-language JavaScript reference Doka: https://doka.guide/js/ ➖ Fundamental online JavaScript tutorial: https://learn.javascript.ru/ 💬 Telegram community chat (help for beginners): https://t.me/FriendlyFrontend 🧑‍💻 Main Telegram channel: https://t.me/AleksanderLamkov ❤️ Boosty (support the author): https://boosty.to/friendly-frontend 🗂️ Free courses on the channel: 🟠 HTML:    • HTML курс 2025   🔵 CSS:    • CSS курс 2025   🟡 JS:    • JavaScript курс 2025   🟢 A11y:    • Accessibility курс 2025   🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...   ⚪️ Layout Masterclass for Beginners:    • Адаптивная верстка сайта с нуля для начина...   🔘 Advanced Layout Workshop (BEM, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...   ⚫️ Layout Workshop with JavaScript Practice:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...   🔴 Layout Workshop on JSX, SCSS, JS, Vite, Minista (SSG), and BEM: https://stepik.org/a/228315 📌 Author: ➖ Personal Website: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/AleksanderLamkov ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksand... ➖ Stepik (paid courses and workshops): https://stepik.org/a/228315 #frontend #frontend #js #javascript