목차
- borderColor 예제 - 테두리 색깔 설정 (상하좌우 동일하게)
- borderColor 정의
- borderColor 구문
- borderColor 예제 - 테두리 색깔 설정 (상하/좌우 다르게)
- borderColor 예제 - 테두리 색깔 반환
borderColor 예제 - 테두리 색깔 설정 (상하좌우 동일하게)
<style>
#hz {border: thick solid blue;}
</style>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.borderColor = "red";
}
</script>
결과보기
borderColor 정의
요소의 테두리 색깔 설정/반환.
borderColor 구문
테두리 색깔 반환 (주의: 인라인스타일 방식만 지원)
object.style.borderColor
테두리 색깔 설정
object.style.borderColor = "color|transparent|initial|inherit"
[속성값]
CSS border-color 속성 참고
borderColor 예제 - 테두리 색깔 설정 (상하/좌우 다르게)
<style>
#hz {border: thick solid blue;}
</style>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.borderColor = "red green";
}
</script>
결과보기
borderColor 예제 - 테두리 색깔 반환
<div id="hz" style="border:thick solid red">홈짱닷컴 Homzzang.com</div>
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.getElementById("hz").style.borderColor);
}
</script>
결과보기 (결과값: red)
PS. (내부스타일/외부스타일) 방식 경우엔 반환 X
<style>
#hz {border:thick solid red}
</style>
<div id="hz">홈짱닷컴 Homzzang.com</div>
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.getElementById("hz").style.borderColor);
}
</script>
결과보기