JavaScript と CSS の復習 (「JavaScript をマスターする」)_JavaScript スキル-jsチュートリアル-php.cn

JavaScript と CSS の復習 (「JavaScript をマスターする」)_JavaScript スキル

WBOY

リリース： 2016-05-16 18:24:24

オリジナル

961 人が閲覧しました

例: elem.style.height または elem.style.height = '100px' ここで、幾何学的プロパティを設定する際には、同時にサイズ単位 (px など) を指定する必要があることに注意してください。数値の代わりにスタイルを表す文字列を返します (例: 100 の代わりに '100px')。さらに、elem.style.height などの操作では、要素の style 属性に設定されているスタイル値を取得することもできます。スタイルを CSS ファイルに配置した場合、上記のメソッドは空の文字列のみを返します。要素の実際の最終的なスタイルを取得するために、本では関数

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

 
//特定の要素 (elem) のスタイル プロパティ (名前) を取得します 
function getStyle(elem, name) { 
 // プロパティが style[] に存在する場合、その後、設定されています 
 // 最近 (そして現在も) 
if(elem.style[name]) return elem.style[name]; 
// それ以外の場合は、IE のメソッドを使用してみてください 
else if (elem. currentStyle) return elem.currentStyle[name]; 
//または W3C のメソッド (存在する場合) 
else if (document.defaultView && document.defaultView.getComputedStyle) { 
 / //従来の「text-align」スタイルのルール記述を使用します 
 //textAlign の代わりに 
name = name.replace(/[A-Z]/g, '-$1'); name.toLowerCase(); 
// スタイル オブジェクトを取得し、プロパティの値を取得します (存在する場合) 
 var s = document.defaultView.getComputedStyle(elem,''); && s.getPropertyValue(name) ; 
 } else return 
} 

 
インタラクティブな効果を構築する鍵は、ページ上の要素の位置を取得する方法を理解することです。まず、CSS のposition 属性値の特徴を確認します。 

static: 静的な配置。これは要素を配置するデフォルトの方法であり、単にドキュメントフローに従います。ただし、要素が静的に配置されている場合、top 属性と left 属性は無効になります。
relative: 相対的な配置。他の命令の影響を受けない限り、要素はドキュメントフローに従い続けます。 top 属性と left 属性を設定すると、要素は元の位置に対してオフセットされます。
絶対: 絶対位置の要素は、ドキュメントフローから完全に外れます。そのような祖先要素が存在しない場合、その位置は、その要素の相対位置になります。文書全体。
修正: ブラウザウィンドウを基準にして要素を配置する固定位置。ブラウザのスクロールバーのドラッグは完全に無視されます。
作成者は、要素のページ位置を取得するためのクロスブラウザ関数をカプセル化しました。
いくつかの重要な要素属性があります: offsetParent、offsetLeft、offsetTop (Mozilla Developer Center の関連ページに直接クリックできます)

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

//x を見つけます (水平、左) ) 要素の位置

function pageX(elem) { 
 // ルート要素にいるかどうかを確認します。 
return elem.offsetParent 
// まだ上に行けるかどうかを確認します。 、現在のオフセットを追加し、上方向に再帰します 
 elem.offsetLeft 要素のページ位置 
function pageY(elem) { 
 //ルート要素にいるかどうかを確認します 
 return elem .offsetParent ? 
//まだ上に移動できる場合は、現在のオフセットを追加して上方向に再帰します 
 elem.offsetTop pageY(elem.offsetParent) : 
//それ以外の場合は、現在のオフセットを取得します 
 elem.offsetTop; 
} 

 
次に、親に対する要素の相対的な水平位置と垂直位置を取得する必要があり、追加の要素を追加できます。 DOM を作成し、その親に対して相対的に配置します。 

コードをコピー

コードは次のとおりです: //要素の水平位置を検索します親内 functionparentX(elem) { //offsetParent が要素の親の場合、早めに中断します return elem.parentNode == elem.offsetParent ?

elem.offsetLeft ? // それ以外の場合は、両方の要素の

// ページ全体に対する相対的な位置を見つけ、その差分を見つける必要があります
pageX(elem) - pageX(elem.parentNode)
}
; // 親内の要素の垂直位置を検索します。
functionparentY(elem) {
//offsetParent が要素の親の場合、早めに中断します。
return elem.parentNode == elem.offsetParent ? 🎜> elem .offsetTop :
// それ以外の場合は、両方の要素の
// ページ全体に対する相対的な位置を見つけ、その違いを見つける必要があります
pageY(elem) - pageY(elem.parentNode) );
}

要素の位置に関する最後の問題は、CSS (非静的) コンテナーを配置するときに要素の位置を取得することです。この問題は getStyle を使用すると簡単に解決できます。

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

 
//要素の左の位置を見つけます 
function posX(elem) { 
 //計算されたスタイルを取得し、値から数値を取得します。 
return parseInt(getStyle(elem, 'left')); 
} 
//要素の先頭位置を検索 
function posY( elem) { 
 / /計算されたスタイルを取得し、値から数値を取得します。 
return parseInt(getStyle(elem, 'top')); 

 

Next要素の位置を設定するだけで、これは非常に簡単です。

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

//水平位置を設定する関数要素の 
function setX(elem, pos) { 
 //ピクセル単位を使用して 'left' css プロパティを設定します 
 elem.style.left = pos 'px'; // 要素の垂直位置を設定する関数 
function setY(elem, pos) { 
 //ピクセル単位を使用して 'top' css プロパティを設定します 
 elem.style.top = pos 'px' ; 
} 

 
要素の現在の位置を調整するために使用される関数がさらに 2 つあります。これらはアニメーション効果で非常に実用的です 

コードをコピーコードは次のとおりです: //水平位置にピクセル数を追加する関数

//要素の

function addX( elem, pos) { 
 // 現在の水平位置を取得し、それにオフセットを追加します 
setX(elem, posX(elem) pos); 
//ピクセル数を 
//要素の垂直位置に追加するために使用できる関数 
function addY(elem, pos) { 
 //現在の垂直位置を取得し、オフセットを追加します 
setY (elem, posY(elem) pos); 

 
要素の位置を取得する方法を理解した後、次の方法を見てみましょう。要素のサイズを取得します。
要素の現在の高さと幅を取得します。

コードをコピーします。

コードは次のとおりです。 : function getHeight(elem) { return parseInt(getStyle(elem, 'height')); }

function getWidth(elem) {

 return parseInt (getStyle(elem, 'width')); 
} 

 
ほとんどの場合、上記の方法で十分ですが、一部のアニメーション インタラクションでは問題が発生する可能性があります。たとえば、0 ピクセルから始まるアニメーションの場合、要素の高さまたは幅を事前に知っておく必要があります。第 2 に、要素の表示属性が none の場合、値は取得されません。これらの問題はどちらもアニメーションの実行時に発生します。この目的のために、著者は要素の潜在的な高さと幅を取得する関数を提供します。 

コードをコピー

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

 
//Find the complete and possible height of the element
function fullHeight(elem) { 
　//If the element is displayed, then use offsetHeight to get the height. If there is no offsetHeight, use getHeight() 
　if(getStyle(elem, 'display') != 'none') 
　　 return elem.offsetHeight || getHeight(elem); 
//Otherwise, we must handle display as none element, so reset its css properties for a more precise reading 
var old = resetCSS(elem, { 
　display:'', 
visibility:'hidden', 
position:'absolute ' 
}); 
//Use clientHeigh to find out the complete height of the element. If it doesn't work yet, use the getHeight function 
var h = elem.clientHeight || getHeight(elem); 
/ /Finally, restore the original properties of its css 
restoreCSS(elem, old); 
//And return the complete height of the element 
return h; 
} 
//Find the complete height of the element , Possible width 
function fullWidth(elem) { 
　 // If the element is displayed, then use offsetWidth to get the width. If there is no offsetWidth, use getWidth() 
if(getStyle(elem, 'display') != 'none') 
 Return elem.offsetWidth || getWidth(elem); 
//Otherwise, we have to handle the element with display as none, so reset its css for more accuracy The reading of 
var old = resetCSS(elem, { 
　display:'', 
visibility:'hidden', 
position:'absolute' 
}); 
//Use clientWidth finds the complete height of the element. If it does not work yet, use the getWidth function 
var w = elem.clientWidth || getWidth(elem); 
//Finally, restore the original CSS 
restoreCSS(elem , old); 
//Return the full width of the element
return w; 
} 
//Function to set a set of CSS properties
function resetCSS(elem, prop) { 
 var old = {}; 
//Traverse each attribute
for(var i in prop) { 
　 //Record the old attribute value
old[i] = elem.style[i] ; 
　　 //Set new value
　elem.style[i] = prop[i]; 
} 
return old; 
} 
//Restore the original CSS properties
function restoreCSS(elem, prop) { 
 for(var i in prop) 
 elem.style[i] = prop[i]; 
} 