목차
- color 예제 - 텍스트 색상 설정
- color 정의
- color 구문
- color 예제 - 텍스트 색상 반환
- color 예제 - 텍스트 색상 토글
- (내부스타일/외부스타일) 경우 글자색 랜덤 변경 후 색상 유지
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>
결과보기
