Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +09:00

4.8 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

JavaScript DOM Changing CSS

🎯 한 줄 통찰 (One-line insight)

The HTML DOM lets JavaScript change the style of any element by assigning to its style.property, and events can trigger those style changes dynamically. [S1]

🧠 핵심 개념 (Core concepts)

Style via the style object — change an element's CSS by setting a property on its style object. [S1]
Events drive style changes — the HTML DOM allows you to execute code when an event occurs; events are generated by the browser when "things happen" to HTML elements, such as clicks, page loads, and input-field changes. [S1]
Reference exists — the HTML DOM Style Object Reference documents all properties that can be set. [S1]

🧩 추출된 패턴 (Extracted patterns)

document.getElementById(id).style.property = new style — the canonical style-change syntax. [S1]
Inline event handler → style change — wire an onclick attribute that mutates style on a target element. [S1]
Visibility toggle — switch style.visibility between 'hidden' and 'visible' to hide or show. [S1]

📖 세부 내용 (Details)

Changing HTML Style [S1] The syntax for changing the style of an HTML element is: [S1]

document.getElementById(id).style.property = new style

Change the color of a paragraph: [S1]

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>

Using Events [S1] The HTML DOM allows you to execute code when an event occurs. Events are generated by the browser when "things happen" to HTML elements, such as clicks, page loads, and changes to input fields. The following example changes a heading's color on click: [S1]

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>

More Examples [S1] Toggle the visibility of an element with two buttons: [S1]

<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">

HTML DOM Style Object Reference [S1] For a complete list of all properties that can be modified through JavaScript, the page directs learners to the HTML DOM Style Object Reference. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's snippets — setting #p2.style.color, an onclick that turns a heading red, and visibility toggle buttons — are the canonical applied examples. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Set a style property (language: JavaScript):

document.getElementById("p2").style.color = "blue";

Change style on click (language: HTML):

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

Toggle visibility:

<input type="button" value="Hide text"
onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text"
onclick="document.getElementById('p1').style.visibility='visible'">

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

상태: draft
검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
신뢰 점수: 0.88
중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

상위/루트: JavaScript Tutorial
관련 개념: JavaScript DOM Changing HTML, JavaScript DOM Animations, JavaScript HTML Events, JavaScript DOM Elements
참조 맥락: The styling step used in interactive UI changes and as the basis for DOM animations.

📚 출처 (Sources)

[S1] W3Schools — JavaScript DOM Changing CSS — https://www.w3schools.com/js/js_htmldom_css.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "JavaScript DOM Changing CSS" page (Astra wiki-curation, P-Reinforce v3.1 format).

4.8 KiB Raw Blame History