Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 텍스트 글꼴 색상 변경하는 방법 완벽 가이드

JavaScript에서 텍스트의 글꼴 색상을 변경하려면 fontcolor() 메서드를 사용할 수 있습니다. 이 메서드는 문자열이 마치 <font color="색상"> 태그로 감싸진 것처럼 지정한 색상으로 화면에 표시되도록 합니다.

fontcolor() 메서드 사용 예제

다음 코드를 실행하면 JavaScript를 이용해 텍스트의 글꼴 색상을 파란색으로 변경할 수 있습니다.

<html>
    <head>
        <title>JavaScript String fontcolor() Method</title>
    </head>

    <body>
        <script>
            var str = new String("Demo Text");
            document.write(str.fontcolor("blue"));
            alert(str.fontcolor("blue"));
        </script>
    </body>
</html>

코드 설명

위 예제에서 new String("Demo Text")으로 문자열 객체를 생성한 후, fontcolor("blue") 메서드를 호출하여 텍스트를 파란색으로 지정했습니다. document.write()를 통해 화면에 출력하고, alert()를 통해 결과 문자열을 확인할 수 있습니다.

주의: fontcolor()는 더 이상 권장되지 않습니다

fontcolor() 메서드는 현재 더 이상 사용되지 않는(deprecated) 기능입니다. 최신 웹 표준에서는 HTML 태그 대신 CSS를 활용하는 것이 권장됩니다.

현대적인 방법: style.color 속성 활용

실무에서는 DOM 요소의 style.color 속성을 직접 조작하는 방식이 표준적으로 사용됩니다.

<!DOCTYPE html>
<html>
<head>
    <title>텍스트 색상 변경</title>
</head>
<body>
    <p id="myText">Demo Text</p>

    <script>
        document.getElementById("myText").style.color = "blue";
    </script>
</body>
</html>

이 방식은 구형 브라우저와의 호환성 문제 없이 모든 최신 브라우저에서 안정적으로 작동하며, 유지보수 측면에서도 훨씬 유리합니다. 색상 값은 "blue" 같은 색상 이름뿐만 아니라 "#0000FF"(16진수) 또는 "rgb(0, 0, 255)"(RGB 함수) 형태로도 지정할 수 있습니다.