IE(Internet Explore) 11에서 background-image 버튼 바꾸는(Change) 방법입니다.
jquery로 .css로 접근시 크롬과 엣지에서 이상없이 버튼 이미지가 바뀌는데,
IE11에서는 바뀌지 않는 에러에 대한 처리 방법입니다.
1. off 이미지와 on 이미지를 CSS(스타일 시트)에 클래스(Class)를 만듭니다.
2. 백그라운드 이미지를 가지고 있는 태그에 대해서 hasClass를 이용하여 on class가 있는지 점검을 합니다.
3. on class가 있다면 on class를 removeClass로 삭제하고 없다면 addClass로 추가를 합니다.
아래와 같이 하면 엣지와 크롬에서는 이상이 없지만 IE11에서는 변경이 되지 않습니다.
$("span").click(function() {
$(this).css("background-image","url('check_on.png'");
});
addClass, removeClass, hasClass 를 이용한 방법입니다.
이렇게 처리를 하면 모든 브라우저에서 이상없이 변경 처리가 됩니다.
$("span").click(function() {
if ( $(this).hasClass('on') ) {
$(this).removeClass('on');
}
else {
$(this).addClass('on');
}
});
위 방법외에 toggleClass를 이용하여 바로 on/off도 가능합니다.
$("span").click(function() {
$(this).toggleClass('on');
});
addClass, removeClass, hasClass 로 만든 전체 소스 코드입니다.
소스 코드를 복사해서 메모장에 넣고 html 확장자로 저장하고 브라우저에서 여시면 바로 확인 가능합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
display: inline-block;
height: 40px;
padding-left: 50px;
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile7.uf.tistory.com%2Fimage%2F99B806475DD766A230E5B3");
background-position: 0px 4px;
background-repeat: no-repeat;
font-size: 22px;
color: #470069;
line-height: 40px;
font-weight: 500;
background-size: 30px 30px;
cursor: pointer;
}
span.on {
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile5.uf.tistory.com%2Fimage%2F99FAD43F5DD7669C0470F6");
}
</style>
</head>
<body>
<span></span>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
$("span").click(function() {
if ( $(this).hasClass('on') ) {
$(this).removeClass('on');
}
else {
$(this).addClass('on');
}
});
</script>
</body>
</html>
toggleClass 로 만든 전체 소스 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
span {
display: inline-block;
height: 40px;
padding-left: 50px;
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile7.uf.tistory.com%2Fimage%2F99B806475DD766A230E5B3");
background-position: 0px 4px;
background-repeat: no-repeat;
font-size: 22px;
color: #470069;
line-height: 40px;
font-weight: 500;
background-size: 30px 30px;
cursor: pointer;
}
span.on {
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile5.uf.tistory.com%2Fimage%2F99FAD43F5DD7669C0470F6");
}
</style>
</head>
<body>
<span></span>
<script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
<script>
$("span").click(function() {
$(this).toggleClass('on');
});
</script>
</body>
</html>
2019/10/23 - [유용한 활용팁] - JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate
JavaScript Input 날짜 체크, Date 만들기 - isDate, getDate, calcDate
JavaScript로 Input type의 날짜를 체크하는 함수들입니다. isDate 함수 날짜 형식이 맞는지 체크하는 함수입니다. 입력값 형식은 yyyymmdd, yyyy-mm-dd, yyyy/mm/dd 3가지 사용을 할 수 있습니다. function isDat..
han288.tistory.com
2019/10/29 - [유용한 활용팁] - JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산
JavaScript Input 생년월일 유효성 검사하기 - isBirthDay, 2월 29일 윤년 계산
JavaScript로 input 입력값에 대한 생년월일 유효성 검사하기 1. 입력값 : YYYYMMDD 2. return 값: true / false 3. 2월 29일(윤년) 체크 function isBirthday(dateStr) { var year = Number(dateStr.substr(0,4))..
han288.tistory.com
2019/11/07 - [유용한 활용팁] - JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용
JavaScript(자바스크립트), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법 - replace 활용
자바스크립트(JavaScript), Jquery를 이용하여 이미지 바뀌게(토글, toggle) 하는 방법입니다. 1. 클릭 이벤트를 캡쳐합니다. 2. 클릭한 객체로 children를 이용하여 이미지 노드를 찾아갑니다. 3. 현재 이미지 속..
han288.tistory.com
2019/11/15 - [유용한 활용팁] - JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)
JavaScript 구분자로 배열 만들기, 타입 변경하기(String, Number)
JavaScript(자바스크립트)에서 구분자를 이용하여 배열 만들기 // 구분자로 구성된 문자열 var str = "aa/bb/cc/dd/ee"; // 구분자(/)를 통해 나뉜 결과는 배열로 저장된다. var arr = str.split("/"); // 결과값..
han288.tistory.com
'유용한 활용팁' 카테고리의 다른 글
| PHP 마지막 문자 콤마(,) 제거 방법 - substr, rtrim, trim, implode (0) | 2019.12.06 |
|---|---|
| 파이썬 웹 연동을 위한 설정 방법 (0) | 2019.11.28 |
| 서브라임텍스트3 SFTP/FTP 설치하기, 환경 설정하기 (0) | 2019.11.22 |
| 서브라임텍스트3 설치하기, 환경 설정하기 (0) | 2019.11.21 |
| 서브라임 에디터 EUC-KR 한글 인코딩, 탭 인덴트(들여쓰기) 설정 방법 (0) | 2019.11.20 |