JAvascriptとCSS復習(『javascriptに精通』)
7856 ワード
例えば:elem.style.-ええ.style.height='100 px'です.ここでは、任意のジオメトリプロパティを設定するには、pxなどの寸法単位を明確にする必要があります.また、任意のジオメトリプロパティは、100ではなく「100 px」などのスタイルを表す文字列を返します.他にもelem.style.heightのような操作では、要素styleプロパティで設定されたスタイル値を取得することもできます.スタイルをcssファイルに統一すると、上記の方法では空白の列しか返されません.要素の真実で最終的なスタイルを取得するために、本には関数があります.
要素のページの位置をどのように取得するかを理解することは、インタラクティブな効果を構築する鍵です.まずcssにおけるposition属性値の特徴を復習する.
static:要素の位置決めのデフォルトであり、ドキュメントフローに簡単に従います.ただし、要素が静的に位置決めされている場合、topとleftのプロパティは無効です.
relative:他の命令の影響を受けない限り、要素はドキュメントフローに従います.topプロパティとleftプロパティの設定により、元の位置に対する要素のオフセットが発生します.
absolute:絶対位置決め、絶対位置決めの要素はドキュメントフローから完全に抜け出し、その最初の非静的位置決めの祖先要素に対して示され、このような祖先要素がなければ、その位置決めはドキュメント全体に対して示されます.
fixed:固定位置決めブラウザウィンドウに対して要素を位置決めします.ブラウザスクロールバーのドラッグは完全に無視されます.
著者らはブラウザ間で要素ページの位置を取得する関数をカプセル化した.
いくつかの重要な要素の属性があります:offsetParent,offsetLeft,offsetTop(Mozilla Developer Centerの関連ページに直接クリックできます)
次に、親に対する要素の水平位置と垂直位置を取得し、親に対する要素の位置を使用すると、DOMに追加の要素を追加し、父親に相対的に位置することができます.
要素の位置の最後の問題は、cssが容器の位置を位置決め(非static)するときに、getStyleという問題がある場合に、要素を取得することです.
次に要素の位置を設定します.これは簡単です.
要素の現在の位置を調整する2つの関数が追加され、アニメーション効果で実用的です.
要素の位置を取得する方法を知ってから、要素のサイズを取得する方法を見てみましょう.
エレメントの現在の高さと幅の取得
ほとんどの場合、上記の方法は十分ですが、いくつかのアニメーションインタラクションで問題が発生します.たとえば、0ピクセルで始まるアニメーションでは、要素の高さや幅を事前に知る必要があります.2つ目は、要素のdisplayプロパティがnoneの場合、値が得られません.どちらの問題も、アニメーションを実行するときに発生します.この目的のために著者らは,要素の潜在的な高さと幅を得る関数を与えた.
まだ多くの内容があって、明日続けて、书く効率が低くて、ノートのスクリーンが小さすぎて、pdfをつけて、文章を书いていつも切り替えて、本当に..ダブルプレゼンテーションをする時だ!
//get a style property (name) of a specific element (elem)
function getStyle(elem, name) {
// if the property exists in style[], then it's been set
//recently (and is current)
if(elem.style[name]) return elem.style[name];
//otherwise, try to use IE's method
else if (elem.currentStyle) return elem.currentStyle[name];
//Or the W3C's method, if it exists
else if (document.defaultView && document.defaultView.getComputedStyle) {
//it uses the traditional 'text-align' style of rule writing
//instead of textAlign
name = name.replace(/[A-Z]/g, '-$1');
name = name.toLowerCase();
//get the style object and get the value of the property ( if it exists)
var s = document.defaultView.getComputedStyle(elem,'');
return s && s.getPropertyValue(name);
} else return null;
}
要素のページの位置をどのように取得するかを理解することは、インタラクティブな効果を構築する鍵です.まずcssにおけるposition属性値の特徴を復習する.
static:要素の位置決めのデフォルトであり、ドキュメントフローに簡単に従います.ただし、要素が静的に位置決めされている場合、topとleftのプロパティは無効です.
relative:他の命令の影響を受けない限り、要素はドキュメントフローに従います.topプロパティとleftプロパティの設定により、元の位置に対する要素のオフセットが発生します.
absolute:絶対位置決め、絶対位置決めの要素はドキュメントフローから完全に抜け出し、その最初の非静的位置決めの祖先要素に対して示され、このような祖先要素がなければ、その位置決めはドキュメント全体に対して示されます.
fixed:固定位置決めブラウザウィンドウに対して要素を位置決めします.ブラウザスクロールバーのドラッグは完全に無視されます.
著者らはブラウザ間で要素ページの位置を取得する関数をカプセル化した.
いくつかの重要な要素の属性があります:offsetParent,offsetLeft,offsetTop(Mozilla Developer Centerの関連ページに直接クリックできます)
//find the x (horizontal, Left) position of an element
function pageX(elem) {
//see if we're at the root element, or not
return elem.offsetParent ?
//if we can still go up, add the current offset and recurse upwards
elem.offsetLeft + pageX(elem.offsetParent) :
//otherwise, just get the current offset
elem.offsetLeft;
}
//find the y (vertical, top) position of an element
function pageY(elem) {
//see if we're at the root element, or not
return elem.offsetParent ?
//if we can still go up, add the current offset and recurse upwards
elem.offsetTop + pageY(elem.offsetParent) :
//otherwise, just get the current offset
elem.offsetTop;
}
次に、親に対する要素の水平位置と垂直位置を取得し、親に対する要素の位置を使用すると、DOMに追加の要素を追加し、父親に相対的に位置することができます.
//find the horizontal position of an element within its parent
function parentX(elem) {
//if the offsetParent is the element's parent, break early
return elem.parentNode == elem.offsetParent ?
elem.offsetLeft :
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageX(elem) - pageX(elem.parentNode);
}
//find the vertical positioning of an element within its parent
function parentY(elem) {
//if the offsetParent is the element's parent, break early
return elem.parentNode == elem.offsetParent ?
elem.offsetTop :
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageY(elem) - pageY(elem.parentNode);
}
要素の位置の最後の問題は、cssが容器の位置を位置決め(非static)するときに、getStyleという問題がある場合に、要素を取得することです.
//find the left position of an element
function posX(elem) {
//get the computed style and get the number out of the value
return parseInt(getStyle(elem, 'left'));
}
//find the top position of an element
function posY(elem) {
//get the computed style and get the number out of the value
return parseInt(getStyle(elem, 'top'));
}
次に要素の位置を設定します.これは簡単です.
//a function for setting the horizontal position of an element
function setX(elem, pos) {
//set the 'left' css property, using pixel units
elem.style.left = pos + 'px';
}
//a function for setting the vertical position of an element
function setY(elem, pos) {
//set the 'top' css property, using pixel units
elem.style.top = pos + 'px';
}
要素の現在の位置を調整する2つの関数が追加され、アニメーション効果で実用的です.
//a function for adding a number of pixels to the horizontal
//position of an element
function addX(elem, pos) {
//get the current horz. position and add the offset to it
setX(elem, posX(elem) + pos);
}
//a function that can be used to add a number of pixels to the
//vertical position of an element
function addY(elem, pos) {
//get the current vertical position and add the offset to it
setY(elem, posY(elem) + pos);
}
要素の位置を取得する方法を知ってから、要素のサイズを取得する方法を見てみましょう.
エレメントの現在の高さと幅の取得
function getHeight(elem) {
return parseInt(getStyle(elem, 'height'));
}
function getWidth(elem) {
return parseInt(getStyle(elem, 'width'));
}
ほとんどの場合、上記の方法は十分ですが、いくつかのアニメーションインタラクションで問題が発生します.たとえば、0ピクセルで始まるアニメーションでは、要素の高さや幅を事前に知る必要があります.2つ目は、要素のdisplayプロパティがnoneの場合、値が得られません.どちらの問題も、アニメーションを実行するときに発生します.この目的のために著者らは,要素の潜在的な高さと幅を得る関数を与えた.
// 、
function fullHeight(elem) {
// ， offsetHeight ， offsetHeight， getHeight()
if(getStyle(elem, 'display') != 'none')
return elem.offsetHeight || getHeight(elem);
// ， display none ， css
var old = resetCSS(elem, {
display:'',
visibility:'hidden',
position:'absolute'
});
// clientHeigh ， ， getHeight
var h = elem.clientHeight || getHeight(elem);
// ， css
restoreCSS(elem, old);
//
return h;
}
// 、
function fullWidth(elem) {
// ， offsetWidth ， offsetWidth, getWidth()
if(getStyle(elem, 'display') != 'none')
return elem.offsetWidth || getWidth(elem);
// ， display none ， css
var old = resetCSS(elem, {
display:'',
visibility:'hidden',
position:'absolute'
});
// clientWidth ， ， getWidth
var w = elem.clientWidth || getWidth(elem);
// ， CSS
restoreCSS(elem, old);
//
return w;
}
// CSS
function resetCSS(elem, prop) {
var old = {};
//
for(var i in prop) {
//
old[i] = elem.style[i];
//
elem.style[i] = prop[i];
}
return old;
}
// CSS
function restoreCSS(elem, prop) {
for(var i in prop)
elem.style[i] = prop[i];
}
まだ多くの内容があって、明日続けて、书く効率が低くて、ノートのスクリーンが小さすぎて、pdfをつけて、文章を书いていつも切り替えて、本当に..ダブルプレゼンテーションをする時だ!