336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요. 이번엔 getElementsByName이라는 것을 통해서 이름이 똑같아도 제어하는 방법을 알려드리겠습니다.

해당 블로그에서는 checkBox를 통해서 예제를 나타냈지만 다른 것에 대해서도 당연히 활용가능합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
    //이름을 이용해서 check의 크기를 알아내기
    console.log(document.getElementsByName("check").length);
 
    //check를 가진 값의 이름을 가져오기
    var size = document.getElementsByName("check").length;
    for(var i = 0; i < size; i++){
        console.log(document.getElementsByName("check")[i].value);
    }
 
    //check이름을 가진 check중에서 체크된 것만 값 가져오기
    var size = document.getElementsByName("check").length;
    for(var i = 0; i < size; i++){
        if(document.getElementsByName("check")[i].checked == true){
            console.log(document.getElementsByName("check")[i].value+"(체크)");
        }
    }
 
    //check중에 특별한 객체를 체크해주기
    document.getElementsByName("check")[2].checked = true;
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<input type='checkbox' name='check' value='값1'/> 값1<br/>
<input type='checkbox' name='check' value='값2'/> 값2<br/>
<input type='checkbox' name='check' value='값3'/> 값3<br/>
<input type='checkbox' name='check' value='값4'/> 값4<br/>
</body>
</html>
cs

해당 예제는 체크박스의 길이. 체크박스 체크하기. 체크박스 의 값가져오기. 체크박스의 체크된 값 가져오기를 getElementsByName을 통해서 다루고 있습니다.

 

 

 

 

 

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요. 이번엔 바로 각각 위,아래,오른쪽,왼쪽에 대해서 padding을 지정하는 방법을 알려드릴꺼예요

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
 
    document.getElementById("testDiv1").style.paddingLeft = "20px";    //왼쪽 순입니다.
 
    document.getElementById("testDiv1").style.paddingRight = "5px";  //오른쪽
    
    document.getElementById("testDiv1").style.paddingTop = "50px";  //위쪽
    
    document.getElementById("testDiv1").style.paddingBottom = "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 크기의 광고 코드만 넣을 수 있습니다.

이번엔 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

 

버튼을 클릭전과 클릭후 그림이 각각 나옵니다.

 

 

 

 

 

 

 

+ Recent posts