<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<script type="text/javascript">
function Test() {
var div = document.getElementById("div1");
//자바스크립트로 CSS 제어, 패턴이 단하나(모든스타일리스트 제어 가능)
//1. 모든 태그는 style 속성이 있음
//div.style
//2. style속성 뒤에 모든 CSS의 표현을 추가
// a. '-'는 삭제
// b. 각 단어의 첫문자는 대문자
// c. 모든 속성값은 "값" 형식으로
div.style.backgroundColor = "red";
div.style.fontColor = "blue";
div.style.fontWeight = "bold";
div.style.textDecoration = "underline";
div.style.fontSize = "12px";
div.style.position = "absolute";
div.style.left = "300px";
div.style.top = "200px";
//z-index zIndex
//margin-left marginLeft
}
</script>
</head>
<body>
<!--Ex11.htm-->
<div id="div1">영역</div>
<hr />
<input id="div1" type="button" value="테스트" onclick="Test();" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css컨트롤</title>
<style type="text/css">
#div1
{
border:1px solid black;
width:100px;
height:100px;
}
img
{
position:absolute;
}
</style>
<script type="text/javascript">
function Test()
{
var div1 = document.getElementById("div1");
div1.style.backgroundColor = "red";
div1.style.border = "10px solid yellow";
div1.style.position = "absolute";
div1.style.left = "40%";
div1.style.top = "65%";
//width -> 기존 크기의 2배
//alert(div1.style.width);
//alert(div1.style.top);
//css에서 정해준 값은 자바스크립트는 모른다 그래서 인라인시트만 값을 읽어올수있다.
//100px -> 100
//alert(parseInt(div1.style.width) * 2 );
// * 2);
div1.style.width = parseInt(div1.style.width) * 2 + "px"; // 100(X) 100px(O)
}
function Test2()
{
var div1 = document.getElementById("div1");
if (div1.style.visibility != "hidden")
div1.style.visibility = "hidden";
else
div1.style.visibility = "visible";
div1.style.display = "inline";
}
function Init()
{
for (var i = 0; i < 100; i++)
{
var div = document.createElement("div");
div.innerText = i;
div.style.border = "1px solid black";
div.style.margin = "5px";
div.style.width = "100px";
div.style.height = "20px";
div.style.backgroundColor = "white";
div.style.float = "left";
div.onclick = function ()
{
event.srcElement.style.backgroundColor = "yellow";
event.srcElement.style.border = "5px dotted red";
};
document.body.appendChild(div);
//이미지 찍는대로 나오기
var num = 0;
document.onmouseup = function ()
{
//alert("test");
//alert(event.button);
//alert(event.x + " : " + event.y);
var img = document.createElement("img");
img.setAttribute("src", "face/" + num + ".png");
img.style.left = (event.x - 64) + "px";
img.style.top = (event.y - 64) + "px";
num++;
if (num == 5) num = 0;
document.body.appendChild(img);
};
}
}
</script>
</head>
<body onload="Init();" >
<!--Ex24_CSS.htm-->
<div id="div1" style="width:100px">버튼 클릭후 css 컨트롤한 색상 하고 박스가 뜬다...</div>
<input type="button" value=" 테스트 " onclick="Test();" />
<hr />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css컨트롤</title>
<style type="text/css">
h2 {text-align:center;}
#list {margin:0px auto;}
body, p, div, span, li, a, input, th, td
{
font-size:12px;
color:#333333;
}
#list
{
width:500px;
border:1px solid gray;
border-collapse:collapse;
}
#list th, #list td
{
border:1px solid gray;
padding:2px;
}
#list th
{
background-color:Orange;
}
</style>
<script type="text/javascript">
function Init()
{
//모든 tr검색
var rows = document.getElementsByTagName("tr");
//rows.onmouseclick = function()
//{
//}
for (var i = 0; i < rows.length; i++)
{
//첫번째 방법
// if (i % 2 == 0)
// rows[i].style.backgroundColor = "yellow";
//}
//두번째 방법
rows[i].onmouseover = function ()
{
//alert(event.srcElement.tagName);
event.srcElement.parentNode.style.backgroundColor = "yellow";
};
rows[i].onmouseout = function ()
{
event.srcElement.parentNode.style.backgroundColor = "transparent";
};
}
}
</script>
</head>
<body onload="Init();">
<h2>자유 게시판</h2>
<table id="list">
<tr>
<th>번호</th>
<th>제목</th>
<th>이름</th>
<th>날짜</th>
<th>조회</th>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td>게시판 리스트입니다. 하하하하</td>
<td>홍길동</td>
<td>2012-05-10</td>
<td>25</td>
</tr>
</table>
</body>
</html>
