css 선택자를 통한 특정 이미지 교체

js 로 만들어진 grid 형 객체에 체크박스를 disable 하는 기능이 효율성이 떨어지고 속도에 영향을 미쳐서 생각한 방법이다.

css 선택자를 이용해서 해당 객체의 스타일을 변경하면 훨씬 더 속도 및 효율성에서 접근이 좋았다

grid의 체크박스는 빈 박스 img고 체크가 되면 체크된 이미지로 변경 되면 disable 속성을 넣으면 회색톤으로 변경된 이미지가

사용된다. 즉 체크박스의 이미지는 총 4개가 된다.
체크
,non체크
disable체크
nonDisable체크

img의 소스경로의 마지막이 체크박스의 경우 ***item_chk1.gif 로 끝난다고 가정할 경우
아래와 같이 적용하면 된다.(아래 예는 이미지속성이 회색으로변경된 이미지에 마우스커서 이벤트도 뺀것이다.)
<style type="text/css">
.objbox img[src$="item_chk1.gif"]{
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url("/[변경할 이미지 주소]/item_chk1_dis.gif")no-repeat;
width: 18px;
height: 18px;
padding-left: 18px;
pointer-events: none;
cursor: default;
}

</style>
여기선 이부분이 중요하다 src$
속성값 src 에서 끝문자열이 같은것에 대해서..적용한다는것이다.
결국 이미지 주소의 마지막 번지를 찾아서 적용이 가능하기에 유용하게 쓰일거 같다.
그런데 위의 방식은 ie에서 적용가능 하다. 웹에서 일반적으로 설명해준 방식은
저것보단 훨씬 간단하다
.objbox img[src$="item_chk1.gif"]{content: url("../Img/Photo/"attr(id)".jpg"); }
요런 방식인데 이게 ie 에서는 안먹는다. 정확한 표준이 아니라고 한다. 크롬이나 기타 브라우저는
해석을 하지만 ie의 경우는 상기처럼 해줘야 한다 . 사이즈 까지 명시하지 않으면 안되었다.

ie 11에서 했으며 하위 버전까진 테스트 하지 않았다(하위버전테스트가 어려운게 경험상 해보면 실제랑 다르게 동작한다).