For example: elem.style.height or elem.style.height = ' 100px ', it is important to note that any geometry attribute must be set to the specified size unit (such as PX), and that any geometry property returns a string representing the style rather than a numeric value (such as ' 100px ' rather than 100). In addition, an operation like Elem.style.height can get the style values set in the element style attribute, and if you place the style uniformly in the CSS file, the above method will only return an empty string. In order to get the real and final style of the element, a function is given in the book
Copy Code code 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)
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 ' the ' of the ' 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" value of the property (if it exists)
var s = document.defaultView.getComputedStyle (Elem, "");
return s && s.getpropertyvalue (name);
else return null;
}
Understanding how to get the element's position on the page is key to structuring the interaction effect. First of all, review the position attribute values in CSS.
Static: Statically positioned, which is the default method for element positioning, it simply follows the document flow. However, when the element is statically positioned, the top and left properties are not valid.
Relative: relative positioning, the element will continue to follow the document flow unless affected by other directives. The setting of the top and left properties causes the element to be offset relative to its original position.
Absolute: Absolute positioning, absolutely positioned elements completely out of the document stream, it will be relative to its first non-static positioning of the ancestor elements and show that, if there is no such ancestor element, it will be positioned relative to the entire document.
Fixed: Positioning the element relative to the browser window. It completely ignores the drag of the browser scroll bar.
The author encapsulates a cross browser function to get the page position of an element
There are several important elements of the attribute: Offsetparent,offsetleft,offsettop (can be directly clicked to the Mozilla Developer Center related page)
Copy Code code as follows:
Find the X (horizontal, left) position of a element
function Pagex (elem) {
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 "Y" (vertical, top) position of a element
function Pagey (elem) {
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;
}
We then get the horizontal and vertical position of the element relative to its father, and use the element relative to the father's position to add extra elements to the DOM and position it relative to its father.
Copy Code code as follows:
Find the horizontal position of a 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 a 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);
}
The last question of the element's position, get the element when the location of the container for the CSS positioning (not static) is GetStyle the problem is solved.
Copy Code code as follows:
Find the left position of a element
function Posx (elem) {
Get the ' computed style and get the ' value
Return to parseint (GetStyle (Elem, ' left '));
}
Find the top position of a element
function Posy (elem) {
Get the ' computed style and get the ' value
Return parseint (GetStyle (elem, ' top '));
}
Next is the position of the element, which is simple.
Copy Code code as follows:
A function for setting the horizontal position of a 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 a element
function Sety (Elem, POS) {
Set the ' Top ' CSS property, using pixel units
Elem.style.top = pos + ' px ';
}
Two more functions to adjust the current position of the element, which is useful in the animation effect
Copy Code code 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 is 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);
}
Once we know how to get the element position, let's take a look at how to get the element size,
Gets the current height and width of the element
Copy Code code as follows:
function GetHeight (elem) {
Return parseint (GetStyle (elem, ' height '));
}
function GetWidth (elem) {
Return parseint (GetStyle (elem, ' width '));
}
In most cases, the above methods are sufficient, but there are problems with some animation interactions. For example, a 0-pixel animation, you need to know in advance how high or how wide the element can be, and second, when the element display property is None, you will not get the value. Both of these problems will occur when the animation is performed. The author gives a function to obtain the potential height and width of the element.
Copy Code code as follows:
Find the complete, possible height of an element
function Fullheight (elem) {
If the element is displayed, then use offsetheight to get a height, and if there is no offsetheight, use GetHeight ()
if (GetStyle (Elem, ' Display ')!= ' none ')
return Elem.offsetheight | | GetHeight (Elem);
Otherwise, we have to handle the element with display none, so reset its CSS properties for a more accurate reading.
var old = Resetcss (Elem, {
Display: ',
Visibility: ' Hidden ',
Position: ' Absolute '
});
Use Clientheigh to find the full height of the element and, if not, use the GetHeight function
var h = elem.clientheight | | GetHeight (Elem);
Finally, restore the original properties of its CSS
Restorecss (Elem, old);
and returns the full height of the element
return h;
}
Find the complete, possible width of an element
function Fullwidth (elem) {
If the element is displayed, then the width can be obtained using offsetwidth, and 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 none, so reset its CSS to get a more accurate reading.
var old = Resetcss (Elem, {
Display: ',
Visibility: ' Hidden ',
Position: ' Absolute '
});
Use ClientWidth to find the full height of the element and, if not, use the GetWidth function
var w = elem.clientwidth | | GetWidth (Elem);
Finally, restore the original CSS
Restorecss (Elem, old);
Returns the full width of an element
Return w;
}
Set a function for a set of CSS properties
function Resetcss (Elem, prop) {
var old = {};
Traverse each property
for (var i in prop) {
Record Old property values
Old[i] = Elem.style[i];
Set a new value
Elem.style[i] = Prop[i];
}
return old;
}
Restore Original CSS Properties
function Restorecss (Elem, prop) {
for (var i in prop)
Elem.style[i] = Prop[i];
}
There are a lot of content, to continue tomorrow, write inefficient, notebook screen is too small, open a pdf, write the old article back and forth switch, really ... It's time to get a double display!
