[DOM_Style] JS - color 속성 - 글자색깔 (=글자색상=글자색깔=글자컬러 = 텍스트색깔 = 컬러속성 = color속성, 상속O)

목차

1. color 예제 - 텍스트 색상 설정
2. color 정의
3. color 구문
4. color 예제 - 텍스트 색상 반환
5. color 예제 - 텍스트 색상 토글
6. (내부스타일/외부스타일) 경우 글자색 랜덤 변경 후 색상 유지

color 예제 - 텍스트 색상 설정

 

<h2 id="a">홈짱닷컴 Homzzang.com</h2>

<p id="b">홈페이지 제작관리 강의/대행</p>

<p id="c">각종 코딩언어/서버관리 매뉴얼</p>

<div id="d">그누보드/영카트/빌더 매뉴얼</div>

<br>

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("a").style.color = "red";

  document.getElementById("b").style.color = "blue";

  document.getElementById("c").style.color = "green";

  document.getElementById("d").style.color = "tomato";

}

</script>

 

결과보기

color 정의

 

요소의 텍스트 글자색 반환/설정.

 

---

 

1.

• 기본값: 없음.
• CSS 버전: CSS1
• CSS 속성: color

 

2.

모든 브라우저 지원.

 

color 구문

[주의] - 인라인스타일 방식에서만 작동.

 

반환

object.style.color

 

설정

object.style.color = "color|initial|inherit"

 

---

[속성값]

 

color

색상코드. 자세히보기

 

initial

기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

---

[반환값]

 

요소의 인라인스타일에 적힌 텍스트 색깔을 나타내는 문자열 반환.

 

color 예제 - 텍스트 색상 반환

 

<p id="hz" style="color:red;">홈짱닷컴 Homzzang.com</p>

<button type="button" onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  alert(document.getElementById("hz").style.color);

}

</script>

 

결과보기

color 예제 - 텍스트 색상 토글

 

<h1 style="color:red;">홈짱닷컴 Homzzang.com</h1>

<button onclick="changeColor()" >색깔 변경</button>

<script>

function changeColor() {

    const h1 = document.querySelector('h1');

    if(h1.style.color == 'red') {

        h1.style.color = 'blue';

    } else if(h1.style.color == 'blue') {

        h1.style.color = 'red';

    }      

}

</script>

 

결과보기

(내부스타일/외부스타일) 경우 글자색 랜덤 변경 후 색상 유지

 

<style>

#hz {color: red;}

</style>

<p id="hz">홈짱닷컴 Homzzang.com</p>

<button id="btn">클릭</button>

<script>

// 로컬 스토리지 방식1

const textElement = document.getElementById('hz');

const button = document.getElementById('btn');

button.addEventListener('click', function() {

  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);

  textElement.style.color = randomColor;

  localStorage.setItem('textColor', randomColor);

});

if (localStorage.getItem('textColor')) {

  const savedColor = localStorage.getItem('textColor');

  const computedStyle = getComputedStyle(textElement);

  const currentColor = computedStyle.getPropertyValue('color');

  if (currentColor !== savedColor) {

    textElement.style.color = savedColor;

  }

}

/*

// 로컬 스토리지 방식2

const button = document.getElementById('btn');

const hz = document.getElementById('hz');

button.addEventListener('click', function() {

  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16); // 색깔랜덤

  hz.style.color = randomColor;

  localStorage.setItem('textColor', randomColor);

});

if (localStorage.getItem('textColor')) {

  hz.style.color = localStorage.getItem('textColor');

}

*/

</script>

결과보기