js로 css 제어하기

const changeColor = document.querySelectorAll("#change01 .color a")

    changeColor.forEach(span => {
        span.addEventListener("click", () => {
            const colorName = span.dataset.color;
            document.querySelector("#change01 .text").style.color = colorName;
        })
    });

.aa {
    display: flex;
    align-items: center;
    justify-content: center;
}
#change01 {
    text-align: center;
}
#change01 h3 {
    font-size: 25px;
}
#change01 .text {
    border: 1px solid #000;
    padding: 50px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    font-size: 50px;
}
#change01 .color {
    margin: 0 auto;
}
#change01 .color a{
    border: 1px solid;
    padding: 10px;
    border-radius: 20px;
    color: #fff;
    font-weight: 1000;
    text-decoration: none;
}
#change01 .color a:nth-child(1) {background :red; border-color: red;}
#change01 .color a:nth-child(2) {background :orange; border-color: orange;}
#change01 .color a:nth-child(3) {background :yellow; border-color: yellow;}
#change01 .color a:nth-child(4) {background :green; border-color: green;}
#change01 .color a:nth-child(5) {background :blue; border-color: blue;}
#change01 .color a:nth-child(6) {background :purple; border-color: purple;}

<div class="aa">
    <div id="change01">
        <h3>글씨를 누르는 색으로 변경하기</h3>
        <p class="text">글씨</p>
        <div class="color">
            <a href="#" data-color="red"><span>빨강</span></a>
            <a href="#" data-color="orange"><span>주황</span></a>
            <a href="#" data-color="yellow"><span>노랑</span></a>
            <a href="#" data-color="green"><span>초록</span></a>
            <a href="#" data-color="blue"><span>파랑</span></a>
            <a href="#" data-color="purple"><span>보라</span></a>
        </div>
    </div>
</div>