For example: or = '100px', it should be noted here that setting any geometric attribute must clearly define the unit of dimensions (such as px), and any geometric attribute returns a string representing the style rather than a numeric value (such as '100px' instead of 100). In addition, such operations can also obtain the style value set in the element style attribute. If you put the styles uniformly in the css file, the above method will only return an empty string. In order to obtain the true and final style of the element, a function is given in the book
//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([name]) return [name];
//otherwise, try to use IE's method
else if () return [name];
//Or the W3C's method, if it exists
else if ( && ) {
//it uses the traditional 'text-align' style of rule writing
//instead of textAlign
name = (/[A-Z]/g, '-$1');
name = ();
//get the style object and get the value of the property ( if it exists)
var s = (elem,'');
return s && (name);
} else return null;
}
Understanding how to get the position of elements on the page is the key to constructing interaction effects. First review the characteristics of position attribute values in css.
static: Static positioning, this is the default way to element positioning, it simply follows the document flow. However, when the element is statically positioned, the top and left attributes are invalid.
relative: relative positioning, elements continue to follow the document flow unless affected by other instructions. Settings of top and left attributes cause an element to be offset relative to its original position.
absolute: Absolutely positioned, an absolutely positioned element completely gets rid of the document flow, it will be displayed relative to its first non-statically positioned ancestor element, and without such an ancestor element, its positioning will be relative to the entire document.
fixed: Fixed positioning positioning elements relative to the browser window. It completely ignores the drag of the browser scrollbar.
The author encapsulates a cross-browser function to get the element's page location
There are several important elements of attributes: offsetParent, offsetLeft, offsetTop (you can directly click to the related page of 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 ?
//if we can still go up, add the current offset and recurse upwards
+ pageX() :
//otherwise, just get the current offset
;
}
//find the y (vertical, top) position of an element
function pageY(elem) {
//see if we're at the root element, or not
return ?
//if we can still go up, add the current offset and recurse upwards
+ pageY() :
//otherwise, just get the current offset
;
}
We then want to obtain the horizontal and vertical position of the element relative to its father, and use the position of the element relative to its father, we can add additional elements to the DOM and position it relatively to its father.
//find the horizontal position of an element within its parent
function parentX(elem) {
//if the offsetParent is the element's parent, break early
return == ?
:
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageX(elem) - pageX();
}
//find the vertical positioning of an element within its parent
function parentY(elem) {
//if the offsetParent is the element's parent, break early
return == ?
:
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageY(elem) - pageY();
}
The last problem of element position, getting the element. When the location of the css position (non-static) container, the problem of getStyle is easy to solve.
//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'));
}
Next is to set the position of the element, which is very simple.
//a function for setting the horizontal position of an element
function setX(elem, pos) {
//set the 'left' css property, using pixel units
= pos + 'px';
}
//a function for setting the vertical position of an element
function setY(elem, pos) {
//set the 'top' css property, using pixel units
= pos + 'px';
}
There are two more functions to adjust the current position of the element, which is very practical in animation effects.
//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);
}
After knowing how to get the element position, let's take a look at how to get the element's size.
Get the current height and width of the element
function getHeight(elem) {
return parseInt(getStyle(elem, 'height'));
}
function getWidth(elem) {
return parseInt(getStyle(elem, 'width'));
}
In most cases, the above method is sufficient, but problems will arise in some animation interactions. For example, for an animation starting with 0 pixels, you need to know in advance how high or wide the element can be. Secondly, when the display attribute of the element is none, you will not get the value. Both of these problems will occur when the animation is executed. For this purpose, the author gives a function to obtain the potential height and width of the element.
//Find the complete, 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 || getHeight(elem);
// Otherwise, we have to deal with the element with display as none, so reset its css property to get a more accurate reading
var old = resetCSS(elem, {
display:'',
visibility:'hidden',
position:'absolute'
});
// Use clientHeight to find out the full height of the element. If it does not take effect, use the getHeight function
var h = || getHeight(elem);
// Finally, restore the original properties of its css
restoreCSS(elem, old);
// and return the full height of the element
return h;
}
//Find the complete, possible width of the element
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 || getWidth(elem);
// Otherwise, we have to deal with the element with display as none, so reset its css to get more accurate readings
var old = resetCSS(elem, {
display:'',
visibility:'hidden',
position:'absolute'
});
// Use clientWidth to find out the full height of the element. If it does not take effect, use the getWidth function
var w = || getWidth(elem);
// Finally, restore the original CSS
restoreCSS(elem, old);
//Return the full width of the element
return w;
}
//Set a set of functions for CSS attributes
function resetCSS(elem, prop) {
var old = {};
//Transfer each property
for(var i in prop) {
//Record old attribute values
old[i] = [i];
//Set new value
[i] = prop[i];
}
return old;
}
//Restore the original CSS attribute
function restoreCSS(elem, prop) {
for(var i in prop)
[i] = prop[i];
}
There is still a lot of content, which will continue tomorrow. The writing efficiency is inefficient. The notebook screen is too small. I open a PDF and switch back and forth when I write the article. It’s true. . . It's time to get a double show!
Copy the codeThe code is as follows:
//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([name]) return [name];
//otherwise, try to use IE's method
else if () return [name];
//Or the W3C's method, if it exists
else if ( && ) {
//it uses the traditional 'text-align' style of rule writing
//instead of textAlign
name = (/[A-Z]/g, '-$1');
name = ();
//get the style object and get the value of the property ( if it exists)
var s = (elem,'');
return s && (name);
} else return null;
}
Understanding how to get the position of elements on the page is the key to constructing interaction effects. First review the characteristics of position attribute values in css.
static: Static positioning, this is the default way to element positioning, it simply follows the document flow. However, when the element is statically positioned, the top and left attributes are invalid.
relative: relative positioning, elements continue to follow the document flow unless affected by other instructions. Settings of top and left attributes cause an element to be offset relative to its original position.
absolute: Absolutely positioned, an absolutely positioned element completely gets rid of the document flow, it will be displayed relative to its first non-statically positioned ancestor element, and without such an ancestor element, its positioning will be relative to the entire document.
fixed: Fixed positioning positioning elements relative to the browser window. It completely ignores the drag of the browser scrollbar.
The author encapsulates a cross-browser function to get the element's page location
There are several important elements of attributes: offsetParent, offsetLeft, offsetTop (you can directly click to the related page of Mozilla Developer Center)
Copy the codeThe code is as follows:
//find the x (horizontal, Left) position of an element
function pageX(elem) {
//see if we're at the root element, or not
return ?
//if we can still go up, add the current offset and recurse upwards
+ pageX() :
//otherwise, just get the current offset
;
}
//find the y (vertical, top) position of an element
function pageY(elem) {
//see if we're at the root element, or not
return ?
//if we can still go up, add the current offset and recurse upwards
+ pageY() :
//otherwise, just get the current offset
;
}
We then want to obtain the horizontal and vertical position of the element relative to its father, and use the position of the element relative to its father, we can add additional elements to the DOM and position it relatively to its father.
Copy the codeThe code is as follows:
//find the horizontal position of an element within its parent
function parentX(elem) {
//if the offsetParent is the element's parent, break early
return == ?
:
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageX(elem) - pageX();
}
//find the vertical positioning of an element within its parent
function parentY(elem) {
//if the offsetParent is the element's parent, break early
return == ?
:
// otherwise, we need to find the position relative to the entire
// page for both elements, and find the difference
pageY(elem) - pageY();
}
The last problem of element position, getting the element. When the location of the css position (non-static) container, the problem of getStyle is easy to solve.
Copy the codeThe code is as follows:
//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'));
}
Next is to set the position of the element, which is very simple.
Copy the codeThe code is as follows:
//a function for setting the horizontal position of an element
function setX(elem, pos) {
//set the 'left' css property, using pixel units
= pos + 'px';
}
//a function for setting the vertical position of an element
function setY(elem, pos) {
//set the 'top' css property, using pixel units
= pos + 'px';
}
There are two more functions to adjust the current position of the element, which is very practical in animation effects.
Copy the codeThe code is as follows:
//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);
}
After knowing how to get the element position, let's take a look at how to get the element's size.
Get the current height and width of the element
Copy the codeThe code is as follows:
function getHeight(elem) {
return parseInt(getStyle(elem, 'height'));
}
function getWidth(elem) {
return parseInt(getStyle(elem, 'width'));
}
In most cases, the above method is sufficient, but problems will arise in some animation interactions. For example, for an animation starting with 0 pixels, you need to know in advance how high or wide the element can be. Secondly, when the display attribute of the element is none, you will not get the value. Both of these problems will occur when the animation is executed. For this purpose, the author gives a function to obtain the potential height and width of the element.
Copy the codeThe code is as follows:
//Find the complete, 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 || getHeight(elem);
// Otherwise, we have to deal with the element with display as none, so reset its css property to get a more accurate reading
var old = resetCSS(elem, {
display:'',
visibility:'hidden',
position:'absolute'
});
// Use clientHeight to find out the full height of the element. If it does not take effect, use the getHeight function
var h = || getHeight(elem);
// Finally, restore the original properties of its css
restoreCSS(elem, old);
// and return the full height of the element
return h;
}
//Find the complete, possible width of the element
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 || getWidth(elem);
// Otherwise, we have to deal with the element with display as none, so reset its css to get more accurate readings
var old = resetCSS(elem, {
display:'',
visibility:'hidden',
position:'absolute'
});
// Use clientWidth to find out the full height of the element. If it does not take effect, use the getWidth function
var w = || getWidth(elem);
// Finally, restore the original CSS
restoreCSS(elem, old);
//Return the full width of the element
return w;
}
//Set a set of functions for CSS attributes
function resetCSS(elem, prop) {
var old = {};
//Transfer each property
for(var i in prop) {
//Record old attribute values
old[i] = [i];
//Set new value
[i] = prop[i];
}
return old;
}
//Restore the original CSS attribute
function restoreCSS(elem, prop) {
for(var i in prop)
[i] = prop[i];
}
There is still a lot of content, which will continue tomorrow. The writing efficiency is inefficient. The notebook screen is too small. I open a PDF and switch back and forth when I write the article. It’s true. . . It's time to get a double show!