کنترل CSS با جاوا اسکریپت

مدرس Morten Rand-Hendriksen

انتشار 2021/09/22

به‌روز‌رسانی 2022/11/09

مدت زمان 2h

سطح مناسب همه

فایل تمرینی ندارد

آموزش Controlling CSS with JavaScript

JavaScript به نشانه گذاری یک صفحه وب (DOM) و سبک های یک صفحه (CSSOM) دسترسی کامل دارد. استفاده از جاوا اسکریپت برای تعامل با DOM و دستکاری آن یک روش معمول است، اما استفاده از جاوا اسکریپت برای تعامل با CSS به ندرت از لایه های کم عمق دستکاری کلاس ها و تزریق سبک های درون خطی کاوش می شود. در این دوره، Morten Rand-Hendriksen به عمق تقاطع جاوا اسکریپت و CSS می پردازد تا ببیند چه چیزی ممکن است. او دستکاری های اساسی CSSOM را برای تغییر سبک های زنده سایت بررسی می کند، به فرصت های جدید ارائه شده توسط ویژگی های سفارشی نگاه می کند، و مفاهیمی مانند نشانه های سبک را بررسی می کند. همانطور که مورتن نشان می‌دهد، استفاده از جاوا اسکریپت برای کنترل CSS، راه را برای طراحی‌های تعاملی و تجربیات کاربر باز می‌کند و به طراحان و توسعه‌دهندگان اجازه می‌دهد کارهایی را انجام دهند که تنها با CSS امکان‌پذیر نیست.

Cascading Style Sheets (CSS) JavaScript Web Application Development

Introduction

New possibilities at the intersection of CSS and JavaScript ()

Exercise files ()

Using GitHub Codespaces with this course ()

1. Accessing Style Sheets and Styles

Access all style sheets in a document ()

Find specific style sheet in a document ()

Disable a style sheet using JavaScript ()

Access rules from a style sheet ()

Insert and delete rules from a style sheet ()

Challenge: Stylesheet switcher ()

Solution: Stylesheet switcher ()

2. Working with Style Rules

Modify a stylesheet rule ()

Find what styles have computed for an element ()

Add new inline styles to an element ()

Access inline element styles ()

Treating styles as element attributes ()

3. Working with Properties

Access the declaration of a specific CSS rule ()

Get a specific property value ()

Set existing property value or create a new property ()

Remove a specific property from a rule ()

The CSS Typed Object Model ()

Create and access style rules with the styleMap property ()

Create/access inline element styles with attributeStyleMap ()

Challenge: Rotate the box ()

Solution: Rotate the box ()

4. Working with Custom Properties

Access custom properties ()

Set custom property values ()

Understanding registered custom properties ()

Defining registered custom properties ()

Challenge: Color selector ()

Solution: Color selector ()

Conclusion

New APIs under development ()

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.