자바스크립트 Css 를 변경할 수 있습니다. getElementById()와 같은 일부 방법을 사용하여 요소의 색상, 글꼴 크기 등과 같은 스타일 , getElementByClassName() 등
다음 예제에서 요소의 글꼴 스타일과 글꼴 크기는 getElementById()를 사용하여 변경되었습니다. 방법.
예시-1
다음 예에서 스타일 명령 "style.fontSize 사용 " 및 "style.fontStyle ", 제공된 텍스트는 "35px"의 글꼴 크기로 변경되고 글꼴 스타일은 "기울임꼴"로 변경됩니다.
<html>
<body>
<p id="size">JavaScript can change the style of an HTML element.</p>
<p id="style">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('size').style.fontSize='35px'">Size</button>
<button type="button" onclick="document.getElementById('style')
.style.fontStyle='italic'">Style</button>
</body>
</html> 위의 코드를 실행하면 브라우저에 다음이 표시됩니다.
위의 버튼을 클릭하면 첫 번째 텍스트가 다른 글꼴 크기 로 변경됩니다. 두 번째 텍스트는 다른 글꼴 스타일로 변경됩니다. 출력에 표시된 대로.
출력
예시-2
다음 예에서 "style.color" 스타일 명령을 사용하여 텍스트의 색상이 파란색으로 변경되었습니다.
<html>
<body>
<p id="color">JavaScript can change the color of an HTML element.</p>
<button type="button" onclick="document.getElementById('color').
style.color='blue'">Color Me</button>
</body>
</html> 위의 코드를 실행하면 브라우저 창에 다음이 표시됩니다.
"색상 지정을 클릭하면 " 버튼 제공된 텍스트의 색상이 '파란색으로 변경됩니다. '와 같이 출력됩니다.
출력
