JavaScript로 GetElementById 대신 getElementByClass를 사용하는 방법은 무엇입니까?
각 DIV의 클래스에 따라 웹 사이트에서 특정 DIV 요소의 가시성을 전환하려고합니다. 나는 그것들을 토글하기 위해 기본 JavaScript 스 니펫을 사용하고 있습니다. 문제는 스크립트 가 JavaScript에서 지원되지 않는 getElementById것처럼 만 사용한다는 것 getElementByClass입니다. 그리고 불행히도 DIV 이름은 특정 카테고리 이름을 사용하여 내 XSLT 스타일 시트에 의해 동적으로 생성되기 때문에 DIV 이름을 지정하는 데 id가 아닌 class를 사용해야합니다.
특정 브라우저가 이제를 지원한다는 것을 알고 getElementByClass있지만 Internet Explorer가 지원 하지 않기 때문에 해당 경로로 가고 싶지 않습니다.
함수를 사용하여 클래스별로 요소를 가져 오는 스크립트 (예 :이 페이지의 # 8 : http://www.dustindiaz.com/top-ten-javascript/ )를 찾았 지만이를 통합하는 방법을 알 수 없습니다. 내 토글 스크립트와 함께.
다음은 HTML 코드입니다. DIV 자체는 XML / XSLT를 사용하여 페이지로드시 생성되므로 누락되었습니다.
주요 질문 : ID로 요소를 가져 오는 대신 클래스별로 요소를 얻으려면 아래 Toggle 스크립트를 어떻게 얻습니까?
<html>
<head>
<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->
<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>
</body>
</html>
최신 브라우저는 document.getElementsByClassName. caniuse 에서이 기능을 제공하는 공급 업체에 대한 전체 분석을 볼 수 있습니다 . 지원을 이전 브라우저로 확장하려는 경우 jQuery 또는 polyfill에있는 것과 같은 선택기 엔진을 고려할 수 있습니다.
이전 답변
다음을 허용하는 jQuery 를 확인하고 싶을 것입니다.
$(".classname").hide(); // hides everything with class 'classname'
Google은 호스팅 된 jQuery 소스 파일을 제공하므로이를 참조하고 순식간에 실행할 수 있습니다. 페이지에 다음을 포함하십시오.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".classname").hide();
});
</script>
이 getElementsByClassName방법은 이제 Firefox, Safari, Chrome, IE 및 Opera의 최신 버전에서 기본적으로 지원됩니다. 기본 구현이 사용 가능한지 확인하는 기능을 만들 수 있습니다. 그렇지 않으면 Dustin Diaz 방법을 사용하십시오.
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
용법:
function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
}
document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';
Acyually는 getElementsByClassName을 사용하여 여러 클래스의 배열을 반환합니다. 동일한 HTML 페이지 내에서 둘 이상의 인스턴스에서 동일한 클래스 이름을 사용할 수 있기 때문입니다. 필요한 클래스를 대상으로 배열 요소 ID를 사용합니다. 제 경우에는 주어진 클래스 이름의 첫 번째 인스턴스입니다. 그래서 저는 [0]을 사용했습니다.
Javascript의 클래스에 액세스하는 데 사용하십시오.
<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
adding to CMS's answer, this is a more generic approach of toggle_visibility I've just used myself:
function toggle_visibility(className,display) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(display.length > 0) {
e.style.display = display;
} else {
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
}
}
My solution:
First create "<style>" tags with an ID.
<style id="YourID">
.YourClass {background-color:red}
</style>
Then, I create a function in JavaScript like this:
document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'
Worked like a charm for me.
Append IDs at the class declaration
.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
'Programing' 카테고리의 다른 글
| Angular“10 $ digest () 반복에 도달했습니다”오류 문제를 해결하는 방법 (0) | 2020.09.12 |
|---|---|
| Swift를 사용한 하위 클래스 UIApplication (0) | 2020.09.12 |
| Graph API를 사용하는 Facebook 'Friends.getAppUsers' (0) | 2020.09.12 |
| State, ST, IORef 및 MVar의 차이점 (0) | 2020.09.12 |
| ARC를 사용하고 iOS 4.0을 대상으로 할 때 약한 참조를 어떻게 대체합니까? (0) | 2020.09.12 |