Javascript and CSS Review (javascript proficiency)

Source: Internet
Author: User

For example, elem. style. height or elem. style. height = '100px '. Note that you must specify the size unit (such as px) for setting any geometric attribute ), at the same time, any geometric attribute returns a string representing the style rather than a value (for example, '100px 'rather than 100 ). In addition, operations such as elem. style. height can also get the style value set in the element style attribute. If you put the style in a css file, the above method will only return an empty string. In order to obtain the true and final style of elements, the book provides a function Copy 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 (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;
}

Understanding how to obtain the element's position on the page is the key to constructing the interaction effect. First, review the characteristics of the position attribute value in css.
Static: static positioning. This is the default method for element positioning. It simply follows the Document Stream. However, the top and left attributes are invalid during static element positioning.
Relative: relative positioning. The element continues to follow the Document Stream unless it is affected by other commands. Setting the top and left attributes causes the element to be offset from its original position.
Absolute: absolute positioning. The absolute positioning element gets rid of the Document Stream and is displayed relative to its first non-static positioning ancestor element. If such an ancestor element is not found, its positioning will be similar to the entire document.
Fixed: fixed positioning: positioning the element relative to the browser window. It ignores the drag of the browser scroll bar.
The author encapsulates a function for cross-browser access to element page locations.
There are several attributes of important elements: offsetParent, offsetLeft, and offsetTop (you can directly click on the relevant page of Mozilla Developer Center)Copy 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 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;
}

Then we need to obtain the horizontal and vertical position of the element relative to its father. Using the position of the element relative to its father, we can add additional elements to the DOM and position it relative to its father.Copy 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 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 );
}

The last problem of element position. When the element is located in a css (non-static) container location, the getStyle problem is well solved.Copy 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 '));
}

The next step is to set the position of the element, which is very simple.Copy 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
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 ';
}

Two more functions are used to adjust the current position of an element, which is very useful in animation effect.Copy 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
// 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 size,
Obtains the current height and width of an element.Copy 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 enough, but problems may occur in some animation interactions. For example, for an animation starting with 0 pixels, you need to know in advance how high or how wide the element can be. Second, when the display attribute of the element is none, you will not get the value. Both of these problems occur during animation execution. For this reason, the author provides a function to obtain the potential height and width of an element.Copy codeThe Code is as follows: // find the complete and possible height of the element.
Function fullHeight (elem ){
// If the element is displayed, 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 process the element whose display is none, so reset its css attribute to get a more accurate reading.
Var old = resetCSS (elem ,{
Display :'',
Visibility: 'ddy ',
Position: 'abort'
});
// Use clientHeigh to locate the complete height of the element. If the height does not take effect, use the getHeight function.
Var h = elem. clientHeight | getHeight (elem );
// Restore the original css attributes.
RestoreCSS (elem, old );
// Returns the complete height of the element.
Return h;
}
// Find the complete and possible width of the element
Function fullWidth (elem ){
// If the element is displayed, use offsetWidth to obtain the width. If there is no offsetWidth, use getWidth ()
If (getStyle (elem, 'display ')! = 'None ')
Return elem. offsetWidth | getWidth (elem );
// Otherwise, we must process the element whose display is none, so reset its css to get a more accurate reading.
Var old = resetCSS (elem ,{
Display :'',
Visibility: 'ddy ',
Position: 'abort'
});
// Use clientWidth to locate the complete height of the element. If the height does not take effect, use the getWidth function.
Var w = elem. clientWidth | getWidth (elem );
// Finally, restore the original CSS
RestoreCSS (elem, old );
// Returns the complete width of the element.
Return w;
}
// Set a set of CSS attributes.
Function resetCSS (elem, prop ){
Var old = {};
// Traverse each attribute
For (var I in prop ){
// Record the old property value
Old [I] = elem. style [I];
// Set a new value
Elem. style [I] = prop [I];
}
Return old;
}
// Restore original CSS attributes
Function restoreCSS (elem, prop ){
For (var I in prop)
Elem. style [I] = prop [I];
}

There is still a lot of content. Continue tomorrow, write efficiency is low, the notebook screen is too small, open a pdf, write the article old switch back and forth, really... It's time to get a dual display!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.