자바스크립 소개 - 실습

자바스크립 소개 - 실습

JavaScript Can Change HTML Content
JavaScript는 HTML의 컨텐츠를 변경할 수 있습니다

텍스트

텍스트

JavaScript Can Change HTML Attribute Values
JavaScript는 HTML의 속성 값을 변경할 수 있습니다

JavaScript Can Change HTML Styles (CSS)
JavaScript는 HTML의 스타일(CSS)을 변경할 수 있습니다.

텍스트

텍스트

JavaScript Can Hide HTML Elements
JavaScript는 HTML 요소를 숨길 수 있습니다

텍스트

텍스트

JavaScript Can Show HTML Elements
JavaScript는 HTML 요소를 표시할 수 있습니다

텍스트

텍스트

<div>
    <div>텍스트</div>
    <div id="change1">텍스트</div>
</div>
<div>
    <input type="checkbox"></input>
    <input type="checkbox" id="change2"></input>
</div>
<div>
    <div>텍스트</div>
    <div id="change3">텍스트</div>
</div>
<div>
    <div>텍스트</div>
    <div id="change4">텍스트</div>
</div>
<div>
    <div>텍스트</div>
    <div id="change5" style="display: none;">텍스트</div>
</div>

document.getElementById("change1").innerHTML = "HTML의 컨텐츠를 변경하기";
document.getElementById("change2").setAttribute("type", "button");
document.getElementById("change3").style.fontSize = "35px";
document.getElementById("change4").style.display = "none";
document.getElementById("change5").style.display = "block";

이론학습