"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h1: "h1", h2: "h2", h3: "h3", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {CodeEditor} = _components; if (!CodeEditor) _missingMdxReference("CodeEditor", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { children: ["DOM Manipulation: Styles and ", _jsx(_components.code, { children: "classList" })] }), "\n", _jsx(_components.p, { children: "Controlling the visual presentation of HTML elements is a core part of dynamic web development. JavaScript allows you to change an element's inline styles directly or, more commonly and effectively, manage its CSS classes, which in turn apply predefined styles." }), "\n", _jsxs(_components.p, { children: ["This lesson explores how to work with an element's ", _jsx(_components.code, { children: "style" }), " property and the powerful ", _jsx(_components.code, { children: "classList" }), " API."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h2, { children: ["1. Direct Inline Style Manipulation (", _jsx(_components.code, { children: "element.style" }), ")"] }), "\n", _jsxs(_components.p, { children: ["Every HTML element has a ", _jsx(_components.code, { children: "style" }), " property, which is an object representing the element's inline CSS styles. You can access and modify individual CSS properties directly through this object."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Accessing:" }), " ", _jsx(_components.code, { children: "element.style.propertyName" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Setting:" }), " ", _jsx(_components.code, { children: "element.style.propertyName = 'value';" })] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Key Considerations:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "CSS Property Naming:" }), " CSS properties that contain hyphens (e.g., ", _jsx(_components.code, { children: "background-color" }), ", ", _jsx(_components.code, { children: "font-size" }), ") must be converted to ", _jsx(_components.strong, { children: "camelCase" }), " when accessed via the ", _jsx(_components.code, { children: "style" }), " object (e.g., ", _jsx(_components.code, { children: "backgroundColor" }), ", ", _jsx(_components.code, { children: "fontSize" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Values as Strings:" }), " All values must be set as strings, including units (e.g., ", _jsx(_components.code, { children: "'10px'" }), ", ", _jsx(_components.code, { children: "'red'" }), ", ", _jsx(_components.code, { children: "'block'" }), ")."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inline Styles Only:" }), " This method only affects the inline ", _jsx(_components.code, { children: "style=\"\"" }), " attribute of the element. It does not modify styles defined in CSS stylesheets (external or internal ", _jsx(_components.code, { children: "\n\n

Element 1

Element 2

\n\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Your Task:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Toggle Class:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "element1" }), "."] }), "\n", _jsxs(_components.li, { children: ["When ", _jsx(_components.code, { children: "toggleHighlight" }), " button is clicked, toggle the ", _jsx(_components.code, { children: "highlight-border" }), " class on ", _jsx(_components.code, { children: "element1" }), ". Log ", _jsx(_components.code, { children: "element1.className" }), " after each toggle."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Add/Remove Class:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "element2" }), "."] }), "\n", _jsxs(_components.li, { children: ["When ", _jsx(_components.code, { children: "changeToWarning" }), " button is clicked, remove ", _jsx(_components.code, { children: "default-bg" }), " and add ", _jsx(_components.code, { children: "warning-bg" }), " to ", _jsx(_components.code, { children: "element2" }), ". Log ", _jsx(_components.code, { children: "element2.className" }), "."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Toggle Display:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "element1" }), "."] }), "\n", _jsxs(_components.li, { children: ["When ", _jsx(_components.code, { children: "hideElement1" }), " button is clicked, toggle the ", _jsx(_components.code, { children: "hide" }), " class on ", _jsx(_components.code, { children: "element1" }), "."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Direct Style (Single Property):" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "element1" }), "."] }), "\n", _jsxs(_components.li, { children: ["When ", _jsx(_components.code, { children: "makeElement1Round" }), " button is clicked, set ", _jsx(_components.code, { children: "element1.style.borderRadius" }), " to ", _jsx(_components.code, { children: "'50%'" }), ". Log its ", _jsx(_components.code, { children: "borderRadius" }), " style."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Direct Style (Dynamic):" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "element1" }), "."] }), "\n", _jsxs(_components.li, { children: ["When ", _jsx(_components.code, { children: "dynamicSize" }), " button is clicked, change its ", _jsx(_components.code, { children: "width" }), " to a random size between 100px and 200px, and its ", _jsx(_components.code, { children: "height" }), " to a random size between 50px and 150px. Use ", _jsx(_components.code, { children: "Math.random()" }), " and ", _jsx(_components.code, { children: "Math.floor()" }), "."] }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(CodeEditor, { title: "Style and Class Manipulation Exercise", language: "javascript", showConsole: true, editorHeight: 900, template: "vanilla", stack: true, code: `

Element 1

Element 2

` })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }