01.23.
스타일 제어
인라인 스타일로 정의한 스타일은 바로 확인 가능하지만
내부css나 외부css는 바로 확인 안됨->분석을 통해 가능
1. getComputedStyle
내부css나 외부css의 분석을 하고 스타일을 확인하는 명령어
단, 인터넷익스플로러에서 확인을 하려면 currerntStyle을 이용
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
var style1=window.getComputedStyle(test1);
alert(style1.fontSize);
}
</script>
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
var style1=test1.currentStyle;
alert(style1.fontSize);
}
</script>
2. 자바스크립트를 이용한 스타일 정의도 가능
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
test1.style.position="absolute";
test1.style.left="100px";
test1.style.top="100px";
test1.style.color="red";
}
</script>
3. removeProperty
스타일을 제거하는 명령어
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
test1.style.removeProperty("border");
test1.style.removeProperty("margin");
}
</script>
4. getAttribute
속성(attribute)을 얻어내는 명령어
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
alert(test1.getAttribute("data-value"));
}
</script>
단 id나 class 등은 바로 확인 가능
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
alert(test1.id);
}
</script>
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
alert(test1.className);
}
</script>
5. setAttribute
속성을 지정하는 명령어
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
test1.setAttribute("data-value","data2");
alert.getAttribute("data-value");
}
</script>
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
test1.setAttribute("id","test_2");
alert.getAttribute("id");
}
</script>
역시 id나 class 등은 바로 적용 가능
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
test1.id="test_2";
alert(test1.id);
}
</script>
<style>
.myClass{
border:5px #3F0 solid;
margin:20px;
}
</style>
<script>
window.onload=function(){
var test1=document.getElementById("test_1");
test1.className="myClass"
}
</script>
6. 이벤트 발생
내부에 이벤트 발생 함수를 적용하는 경우
<script>
window.onload=function(){
var info=document.getElementById("info");
var btn_1=document.getElementById("btn_1");
btn_1.onclick=function(){
info.innerHTML+="마우스가 클릭되었습니다.<br>"
}
}
</script>
외부에 이벤트 발생 함수를 적용하는 경우
<script>
window.onload=function(){
var info=document.getElementById("info");
var btn_1=document.getElementById("btn_1");
btn_1.onclick=onClick;
}
function onClick(){
info.innerHTML+="마우스가 클릭되었습니다.<br>"
}
</script>
구 버전으로 이벤트 발생만 하게 해주고 제어는 불가능
-> 이에 대한 대안으로 나온 것이 addEventListener
*7. addEventListener
이벤트를 발생시키는 명령어
마찬가지로 이벤트 발생 함수를 내부에 적용하는 경우
<script>
window.onload=function(){
var info=document.getElementById("info");
var btn_1=document.getElementById("btn_1");
btn_1.addEventListener("click",function(){
info.innerHTML+="마우스가 클릭되었습니다.</br>"
},false)
}
</script>
*마찬가지로 이벤트 발생 함수를 외부에 적용하는 경우
<script>
window.onload=function(){
var info=document.getElementById("info");
var btn_1=document.getElementById("btn_1");
btn_1.addEventListener("click",onClick,false);
}
function onClick(){
info.innerHTML+="마우스가 클릭되었습니다.</br>"
}
</script>
8. removeEventListener
이벤트를 제거하는 명령어
<script>
window.onload=function(){
var info=document.getElementById("info");
var play_btn=document.getElementById("play_btn");
var stop_btn=document.getElementById("stop_btn");
var btn_target=document.getElementById("btn_target");
play_btn.addEventListener("click",onAdd,false);
stop_btn.addEventListener("click",onRemove,false);
}
function onAdd(){
addinfo("mouseover 이벤트리스너등록, 이제부터 mouseover가 실행");
btn_target.addEventListener("mouseover",onOver,false);
}
function onRemove(){
addinfo("mouseover 이벤트리스너삭제, 이제부터 mouseover가 실행안됨");
btn_target.removeEventListener("mouseover",onOver,false);
}
function addinfo(str){
info.innerHTML+=str+"</br>"
}
function onOver(){
addinfo("마우스가 오버되었습니다");
}
</script>