.css() 이용하여 버튼 보이지 않도록 하기

<button> 하나만으로는 jQuery의 .show(), .hide(), .css() 메소드가 먹히지 않는다.

<button> 이외에 elements 들도 마찬가지로 먹히지 않았다.

왜지...

jQuery API를 다시 정독해야겠다... 반만 알고 반은 모르니 이런 고생을 사서 하는구나...

 

 

때문에, wrapper 역할을 하는 div영역을 버튼 겉에 한번 감싸줬고, (display:none을 기본으로)

스크립트에서는 .css() 를 제어하는 방법으로 소스를 짰다.

 

제이쿼리 .css() 메소드는.. 문법을 잘 써야 된다.

 

.css( propertyName, value )

속성이름과 값 모두 따옴표로 감싸줘야함.

 

 

 

HTML

<div id="divBtnDelete" style="display: none;">
 <button type="button" name="btnDelete" id="btnDelete" onclick="goDelete();">전체삭제</button>
</div>

 

button을 감싸는 div영역. 기본 속성은 보이지 않도록.

 

 

 

Script

$(document).ready(function() {
    if ($("#wtype").val() == "build_edit") {
 
        //같은 의미(propertyName, value 둘 다 따옴표로 감싸줘야 함)
        $("#divBtnDelete").css("display", "inline");
 
        //같은 의미(일반적인 style 작성방법)
        $("#divBtnDelete").css({
            display: "inline"
        });
 
    };
})

 

필요한 상황에서 div영역의 display 속성을 바꿔 화면에 보이도록 하는 스크립트.

.show(), .hide()를 사용해도 되는데, 깨지는 경향이 있어 .css() 메소드로 display 속성을 제어하도록 했다.

5번처럼 한 줄에 적어도 되고 (속성명과 값 모두 쌍따옴표로 감싸기... 이 미묘한 차이 때문에 됐다 안됐다 골치아프게 됨 ㅠ)

8~10번처럼 나열해서 적어도 된다.

 

 

 

참고 :

http://api.jquery.com/css/

https://learn.jquery.com/using-jquery-core/css-styling-dimensions/

버튼 제이쿼리로 disabled 제어하기

$("#btnReqOk").attr("disabled", "disabled");