●DOM 예제
- 페이지 리로드 없이 이미지 삭제하기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>a a a</title>
</head>
<body>
<h1>a</h1>
<script type="text/javascript">
var imgFlag = "true";
function Test(){
var myDoc=document;
var myEle=myDoc.documentElement;
alert(myEle.nodeName);
var myEle2 = myEle.getElementsByTagName("head")[0];
if(myEle2 != null){
alert(myEle2.nodeName);
var titleElement = myEle2.getElementsByTagName("title")[0];
var bodyElement = myEle2.nextSibling;
while(bodyElement.nodeName.toLowerCase() != "body"){
bodyElement = bodyElement.nextSibling;
}
if(imgFlag == "true"){
if(bodyElement.hasChildNodes()){
for(a=0; a<3; a++){
var curNode = bodyElement.childNodes[a];
if(curNode.nodeName.toLowerCase()=="img"){
bodyElement.removeChild(curNode);
}
imgFlag = "false";
}
}
}else{
alert("aaa");
}
}
}
</script>
<img src="al.png" />
<input type="button" value="click" onclick="Test();" />
</body>
</html>
- 이미지 객체 테두리 굵기 속성 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>b b b</title>
<script type="text/javascript">
function setSize(border){
document.getElementById("Img1").style.borderWidth = border+"px";
}
</script>
</head>
<body>
<img id="Img1" src="al.png" style="border:5px solid red;" width = "100" height="100" >
<form name="myForm">
<input type="button" value="1" onclick="setSize(1);" >
<input type="button" value="50" onclick="setSize(50);" >
</form>
</body>
</html>
- css 속성 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
var p = document.getElementById("a");
var t = document.getElementById("b");
p.style.color="green";
p.style.fontSize = "30pt"
t.style.color="yellow";
t.style.fontSize = "100pt"
}
</script>
</head>
<body>
<p id="a" onclick="window.location.href = 'http://www.naver.com/' ;" >네이버 고고</p>
<h1 id="b">Hello World</h1>
<form>
<p><input value="click" type="button" onclick="change();"></p>
</form>
</body>
</html>
'프로그래밍 > java script' 카테고리의 다른 글
| 하이차트(highcharts) 기본 구조 (0) | 2013.11.12 |
|---|---|
| javascript 체크박스(checkbox) 하나만 선택, 모두 선택/해제 (0) | 2013.11.05 |
| javascript DOM1 (0) | 2013.08.12 |
| java script 문법 정리 3 (0) | 2012.03.22 |
| java script 문법 정리 2 (0) | 2012.03.21 |
댓글