DOM script_javascript スキルを通じてスタイル情報を設定する

DOM スクリプトを使用してスタイル情報を設定します: (by wushan)
ほとんどの状況では CSS を使用してスタイルを設定しますが、ノード ツリー情報内の要素の位置に基づいてノード スタイルを設定するなど、特殊な場合もあります。現時点では CSS でこれを行う方法はありません。ただし、DOM を使用すると簡単に実現できます。
例: すべての hl 要素の次の兄弟ノード (次の要素ノード) に特定のスタイルを適用します。現時点では、CSS を使用して位置を決定する方法はありませんが、DOM の getElementsByTagName() メソッドを使用して、すべての hl 要素の背後にある要素を簡単に見つけることができます。現時点では、見つかった要素にスタイルを適用するだけで済みます。以下はコードのリストです:

コードをコピー コードは次のとおりです:

function styleHeaderSibling ( ){
if(!document.getElementsByTagName) return false;
//ブラウザが「getElementsByTagName」メソッドをサポートしているかどうかを検出します (一部のブラウザは DOM をサポートしていません)
var headers=document. hl");
for(var=0;ivar elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight=”bold” ;
elem .style.fontsize="1.2em";
}
}
function getNextElement(node){
if(node.nodeType==1){ //このノードはテキストノード
ノードを返す; }
if(node.nextSibling){
retnrn getNextElement(node.nextSibling);
return null; >

欠点: DOM スクリプトで設定したスタイル情報を変更する必要がある場合、「ビヘイビア層」に宣言できると非常に面倒です。ノードのクラス属性をスタイル設定すると、変更は非常に簡単になります。たとえば、上記の例に次の変更を加えることができます:

コードをコピーします

コードは次のとおりです: function styleHeaderSibling( ){ if(!document.getElementsByTagName) return false;

//ブラウザが「getElementsByTagName」メソッドをサポートしているかどうかを検出します

var headers=document. hl");
for (var=0;ivar elem=getNextElement(headers[i].nextSibling);
elem.className="intro";
//要素を設定します。 クラス属性値の構文は次のとおりです。 elements.className=value
}
}


この手法には欠点があるため、要素が元々クラス属性値の場合、元の属性値は新しい属性値によって上書きされ、元のスタイルは失われるため、メタクラス属性値を上書きするのではなく、それに基づいて新しい属性値を追加する必要があります。メソッドは次のとおりです:

コードをコピー

コードは次のとおりです: function addClass(element) ,value)｛ if(!element.className){

element.className=value;

}else{
newclassName=element.className =" ";このスペースに注目してください
newclassName =value;
element.className =newclassName;
｝


次に、上記の関数を変更するだけです。


コードをコピーします

コードは次のとおりです:

function styleHeaderSibling( ){ if(!document.getElementsByTagName) return false; //ブラウザが「getElementsByTagName」をサポートしているかどうかを検出します。 メソッド var headers=document.getElementsByTagName(“hl”); for(var=0;ivar elem=getNextElement(headers[i].nextSibling);

addClass(elem,"intro")

}
}



注:通常の状況では、DOM を使用してスタイルを設定するのは賢明ではありません。このメソッドは、CSS がページのコンテンツを充実させるために必要なスタイルを設定できない場合にのみ使用されます。