各DIVのクラスに応じて、Webサイト上の特定のDIV要素の表示を切り替えようとしています。基本的なJavaScriptスニペットを使用して切り替えます。問題は、getElementById
がJavaScriptでサポートされていないため、スクリプトはgetElementByClass
のみを使用することです。残念ながら、DIVの名前にはidではなくclassを使用する必要があります。DIV名は、特定のカテゴリ名を使用してXSLTスタイルシートによって動的に生成されるためです。
特定のブラウザがgetElementByClass
をサポートするようになったことは知っていますが、Internet Explorerはサポートしていないので、そのルートに行きたくありません。
クラスごとに要素を取得する関数を使用するスクリプトを見つけました(このページの#8など: http://www.dustindiaz.com/top-ten-javascript/ )これらをトグルスクリプトと統合する方法を理解します。
これがHTMLコードです。 DIV自体は、XML/XSLTを使用したページの読み込み時に生成されるため、欠落しています。
主な質問:IDで要素を取得する代わりにクラスで要素を取得するために、以下のトグルスクリプトを取得するにはどうすればよいですか?
<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またはポリフィルにあるようなセレクターエンジンを検討することをお勧めします。
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の最新バージョンでネイティブにサポートされるようになりました。ネイティブ実装が利用可能かどうかを確認する関数を作成できます。
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';
実際にgetElementsByClassNameを使用して、複数のクラスの配列を返します。同じクラス名が同じHTMLページ内の複数のインスタンスで使用される可能性があるためです。配列要素IDを使用して、必要なクラスをターゲットにします。私の場合は、指定されたクラス名の最初のインスタンスです。したがって、[0]を使用しました
Javascriptのクラスにアクセスするために使用します。
<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>
私の解決策:
まず、IDを使用して「<style>」タグを作成します。
<style id="YourID">
.YourClass {background-color:red}
</style>
次に、JavaScriptで次のような関数を作成します。
document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'
私にとって魅力のように働いた。
CMSの答え に追加すると、これはtoggle_visibility
のより一般的なアプローチです。
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';
}
}
}
}
クラス宣言でIDを追加します
.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";