336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
이번엔 padding을 JAVASCRIPT를 사용하는 방법을 알려드릴께요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv1").style.padding = "10px 5px 100px 100px"; //위쪽 오른쪽 아래쪽 왼쪽 순입니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv1' id='testDiv1' style='width:100px; border:1px solid #000'>text</div>
</body>
</html>
|
cs |
버튼을 클릭전과 클릭후 그림이 각각 나옵니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 JAVASCRIPT에서 테두리 넣는것을 알려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.border = "1px solid #000000"; //1픽셀로 점선방식으로 검정색으로 넣습니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
이 화면에서 클릭하면
이렇게 대상에서 테두리가 나옵니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 배경색을 넣을께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.backgroundColor = "#000000"; //RGB코드
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
이렇게 화면에서 버튼을 클릭하면
text가 있던 곳의 배경색이 검은색으로 바뀌어요
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 JAVASCRIPT CSS처리하는 방법을 시작할꼐요.
처음엔 내용이 보여지고 안보여지고 하는 것을 처리할께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
if(document.getElementById("testDiv").style.display == "none") //안보여지는지 확인
document.getElementById("testDiv").style.display = ""; //안보여지면 보이게
else
document.getElementById("testDiv").style.display = "none"; //보여지면 안보이게
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
결과는 이렇게 나오는데요. 버튼을 눌르면 사라지고 다시 눌르면 나타납니다.