JS의 클래스로 ID 변경

Question

내 사이트의 사진을 보려면 일부 자바 스크립트가 필요하지 않습니다. 하지만 모든 사이트에서 더 많은 사진을 볼 수 있기를 원합니다. - 그 대신 ID를 클래스로 변경해야합니다. 그게 가능합니까?

자바 스크립트

function toggle(div_id) { 
var el = document.getElementById(div_id); 
if (el.style.display == 'none') { el.style.display = 'block';} 
else {el.style.display = 'none';} 

}

function blanket_size(popUpDivVar) { 
if (typeof window.innerWidth != 'undefined') { 
    viewportheight = window.innerHeight; 
} else { 
    viewportheight = document.documentElement.clientHeight; 
} 
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) { 
    blanket_height = viewportheight; 
} else { 
    if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) { 
     blanket_height = document.body.parentNode.clientHeight; 
    } else { 
     blanket_height = document.body.parentNode.scrollHeight; 
    } 
} 

var blanket = document.getElementById('blanket'); 
blanket.style.height = blanket_height + 'px'; 
var popUpDiv = document.getElementById(popUpDivVar); 
popUpDiv_height=blanket_height/2-150;//150 is half popup's height 
popUpDiv.style.top = popUpDiv_height + 'px'; 

}

function window_pos(popUpDivVar) { 
if (typeof window.innerWidth != 'undefined') { 
    viewportwidth = window.innerHeight; 
} else { 
    viewportwidth = document.documentElement.clientHeight; 
} 
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) { 
    window_width = viewportwidth; 
} else { 
    if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) { 
     window_width = document.body.parentNode.clientWidth; 
    } else { 
     window_width = document.body.parentNode.scrollWidth; 
    } 
} 
var popUpDiv = document.getElementById(popUpDivVar); 
window_width=window_width/2-150;//150 is half popup's width 
popUpDiv.style.left = window_width + 'px'; 

}

function popup(windowname) { 
blanket_size(windowname); 
window_pos(windowname); 
toggle('blanket'); 
toggle(windowname);  

}

CSS

#blanket { 
background-color:#111; 
opacity: 0.8; 
filter:alpha(opacity=65); 
position:absolute; 
z-index: 1000; 
top:0px; 
left:0px; 
width:100%; 

}

#popUpDiv { 
position:absolute; 
background-repeat:no-repeat; 
z-index: 1001; 
text-align:center; 
left:0; 
top:0; 

}

HTML

<div id="blanket" style="display:none;"></div> 
       <div id="popUpDiv" style="display:none;"> 
        <a href="Index.html" onclick="popup('popUpDiv')"> 
        <img id="imageid" src="bigPicture.png" alt="picture"/><br /></a> 
       </div> 
       <a href="#" onclick="popup('popUpDiv')" class="pic"><img src="smallPicture.png" alt="picture"/></a> 

Answer 1

기금 amentally, 당신이해야 할 일은 하나의 요소를 얻으려면 getElementById이 호출 된 곳을 모두 바꾸는 것이며, getElementsByClassName을 사용하여 목록의 목록을 얻습니다. 그런 다음 목록을 반복하여 원하는 작업을 수행하십시오. 마찬가지로 특정 요소 (예 : toggle)와 같이 작동해야하는 코드 부분은 ID 문자열이 아닌 요소 개체를 받아 들여야합니다.

getElementsByClassName은 Internet Explorer 8 및 이전 버전을 제외한 모든 주요 브라우저에서 지원됩니다. IE8 및 이전 버전을 지원해야하는 경우 자체 구현을 제공해야합니다 ("IE getElementsByClassName"을 검색하는 경우 선택할 수있는 구현이 많이 있음). 초기에 반드시 명확하지 않다 알고

하나 특히 유용 것입니다 당신이 (addEventListener를 통해 또는 attachEvent [IE에] 코드;하지 마크 업에 onclick 속성에) 제대로 이벤트 처리기를 바인딩 할 때, 이벤트 처리기 호출 중에 this은 핸들러가 연결된 요소를 참조하므로 직접 처리 할 수 ​​있습니다 (예 : this.style.color = "green";).

필요한 API를 배우고 언어를 배울 시간은 아무 것도 없습니다.

일부 참조 :

• DOM2 Core - 거의 보편적으로
• DOM2 HTML stuff
지원이 - 거의 보편적으로
• DOM3 Core
지원 - 대부분 지원, 오래된 IE 버전은 문제가있다
• HTML5 Common DOM Bindings
• ECMA 스크립트 (자바 스크립트) 사양 - Official PDF | Handy HTML version -하지만 꼭 읽어야하는 것은 아닙니다.
• Mozilla's JavaScript reference pages - 사양
• Crockford on JavaScript보다 훨씬 더 쉽게 읽을 수 - 당신이 조금 크록 포드를 읽으려고하기 전에 언어를 알 때까지 기다리십시오, 그러나 할는 크록 포드를 참조하십시오. 거기에 좋은 정보가 많이 있습니다. 비록 당신이 그의 결론 중 일부에 동의하지 않을지라도 (물론 그렇습니다. 그러나 대부분은 자리를 잡았습니다).
• 자바 스크립트 : 데이비드 플래너에 의한 확실한 가이드 (구식 종이 책)
• (오 도대체) 나는 또한 내 anemic little blog에서 자바 스크립트와 DOM 관련 재료의 다양한 조각을 작성합니다. 자바 스크립트를 배우는 중이라면 JavaScript's Curiously-Powerful OR Operator (||) 및 Closures are not complicated과 같은 가장 오래된 항목부터 시작하여 앞으로 나아가십시오.

대상으로 지정할 브라우저에서 어떤 것이 지원되는지 확실하지 않으면 테스트하거나 사용하거나 http://caniuse.com/ 또는 그와 비슷한 것을 사용해야합니다.

---

위의 내용은 브라우저의 DOM과 직접 대화하는 방법을 알려주는 다양한 DOM 사양과 관련이 있습니다. DOM은 위대하고 강력하지만 꼭 필요한 것은 아닙니다 사용할 수 있습니다. 또한 앞서 언급했듯이 다양한 부분에 대한 지원은 브라우저마다 다르며 일부 브라우저에서는 버그가 있습니다 (예 : IE7 and earlier get getElementById wrong). 이러한 차이점과 버그를 직접 발견하고 해결하거나 jQuery, Prototype, YUI, Closure 또는 any of several others과 같은 유용한 JavaScript 라이브러리를 사용하여 다른 사람이 수행 한 작업을 활용할 수 있습니다. 그렇게한다면 DOM을 이해하는 것이 여전히 유용하므로 위의 참조를 건너 뛰지 않고 대신 해당 라이브러리의 API를 사용할 것입니다.