JavaScript에서 텍스트 색상을 반환하거나 새롭게 설정하려면 color 속성을 사용하면 됩니다. 이 속성은 DOM 요소의 style 객체에 포함되어 있어, 인라인 스타일로 지정된 텍스트 색상을 간편하게 읽어오거나 변경할 수 있습니다.
예제
다음 코드를 실행한 뒤 버튼을 클릭하면, 해당 문단에 적용된 텍스트 색상이 알림 창으로 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h2>Heading 2</h2>
<p id="myId" style="color:green;">Demo Text</p>
<br>
<button type="button" onclick="display()">Click to get color</button>
<script>
function display() {
alert(document.getElementById("myId").style.color);
}
</script>
</body>
</html>
참고 사항
style.color 속성은 HTML 태그에 직접 작성한 인라인 스타일 값만 반환합니다. 외부 CSS 파일이나 <style> 태그로 지정한 색상을 가져오려면 window.getComputedStyle() 메서드를 함께 사용하는 것이 좋습니다. 또한 같은 방식으로 element.style.color = "blue";처럼 값을 할당하면 텍스트 색상을 동적으로 변경할 수도 있습니다.