docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: javascript-dom-changing-css
|
||||
title: "JavaScript DOM Changing CSS"
|
||||
category: "Frontend"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["changing CSS", "style property", "element.style", "DOM styling", "style object"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-06-23
|
||||
updated_at: 2026-06-23
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["javascript", "js", "web", "frontend", "w3schools", "dom"]
|
||||
raw_sources: ["https://www.w3schools.com/js/js_htmldom_css.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[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]
|
||||
```javascript
|
||||
document.getElementById(id).style.property = new style
|
||||
```
|
||||
Change the color of a paragraph: [S1]
|
||||
```html
|
||||
<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]
|
||||
```html
|
||||
<!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]
|
||||
```html
|
||||
<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):
|
||||
```javascript
|
||||
document.getElementById("p2").style.color = "blue";
|
||||
```
|
||||
Change style on click (language: HTML):
|
||||
```html
|
||||
<button type="button"
|
||||
onclick="document.getElementById('id1').style.color = 'red'">
|
||||
Click Me!</button>
|
||||
```
|
||||
Toggle visibility:
|
||||
```html
|
||||
<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).
|
||||
Reference in New Issue
Block a user