JQuery&Javascript

[JQuery] - display : block, none 로 div 보이게 안보이게 하기

Riucc 2019. 10. 9. 22:56

○ display : block, none 로 div 보이게 안보이게 하기 

 

- display : block, none 로 div 보이게 안보이게 하기


CSS 속성값 확인

  $("변경하려는 대상").css("display");  // 출력 none, block


CSS 속성값 변경

  $("변경하려는 대상").css("display","속성값");  // 속성값 : none, block


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
38
39
<div class="test">
    <select name="stbType" id="stbType">
        <option value="_0">Design</option>
        <option value="_1">User</option>
        <option value="_2">Admin</option>
        <option value="_3">Dragon</option>
    </select>
 
    <div class="oneView" id="oneView">
        <span>입력방법1 : </span><input type="text" readonly /> 링크
    </div>
    <div class="twoView" id="twoView" style="display:none;">
        <span>입력방법2 : </span><input type="text" />
    </div>
    <div class="threeView" id="threeView" style="display:none;">
        <span>입력방법3 : </span><input type="text" value="" disabled />
    </div>
</div>
 
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#stbType').on('change', function () {
            if ($(this).val() == '_0') {
                $('#oneView').css('display', 'block');
                $('#twoView').css('display', 'none');
                $('#threeView').css('display', 'none');
            } else if ($(this).val() == '_1') {
                $('#oneView').css('display', 'none');
                $('#twoView').css('display', 'block');
                $('#threeView').css('display', 'none');
            } else {
                $('#oneView').css('display', 'none');
                $('#twoView').css('display', 'none');
                $('#threeView').css('display', 'block');
            }
        });
    });
</script>
cs


저작자표시