Some usage of document.body and frequently asked questions in JS

Some usage of document.body and frequently asked questions in JS

Web page Visible area width: document.body.clientWidth;
Web page Visible Area High: document.body.clientHeight;
Web page Visible Area width: document.body.offsetWidth (including the width of the edge);
Web page Visible Area High: document.body.offsetHeight (including the width of the edge);
Page body Full text width: document.body.scrollWidth;
Page body Full text High: document.body.scrollHeight;
The page was rolled High: document.body.scrollTop;
The webpage is rolled away left: document.body.scrollLeft;
Page body part: window.screentop;
Page body part left: window.screenleft;
High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;
Screen available working area height: window.screen.availHeight;
Screen available working area width: window.screen.availWidth;


ScrollHeight: Gets the scroll height of the object.
ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property
OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property
Event.clientx horizontal coordinates of relative documents
Event.clienty vertical coordinates of relative documents

Event.offsetx horizontal coordinates relative to the container
Event.offsety the vertical coordinate of the relative container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling
Post by Molong on 2009-05-19 11:57 PM #1

To get the vertical position of the scroll bar for the current page, use:
Document.documentElement.scrollTop;
Instead of:
Document.body.scrollTop;
The documentelement corresponds to an HTML tag, and the body corresponds to the body tag.

In the standard, Document.body.scrollTop constant for 0, need to use DOCUMENT.DOCUMENTELEMENT.SCROLLTOP to replace;
If you want to position the mouse relative to the absolute position of the page, you will find that there are 999.99 articles in 1000 posts in Google that will let you use event.clientx+document.body.scrollleft,event.clienty+ Document.body.scrollTop, if you find that your mouse positioning deviates from your imagination, please don't be surprised, this is normal thing.
The Document.body.scrollX object has not been supported after ie5.5.
So when you're programming, add that judgment.
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
Top=document.body.scrolltop;
Left=document.body.scrollleft;
}
if (document.documentelement && document.documentElement.scrollTop && Document.documentElement.scrollLeft)
{
Top=document.documentelement.scrolltop;
Left=document.documentelement.scrollleft;
}

Frequently asked questions in JavaScript

Here is a simple use of jquery to manipulate some of the IFRAME records, this use of pure JS and can be achieved.

First, the method of finding the parent page element in the IFRAME:
$ (' #id ', window.parent.document)

Second, get the element method in the IFRAME in the parent page:
$ (This). Contents (). Find ("#suggestBox")

Third, call the methods and variables defined in the parent page in the IFRAME:
Parent.method
Parent.value

1. Collection Class object Issues
Many collection class objects in existing code use (), IE can accept, Firefox can not.
WORKAROUND: Use [] instead as the subscript operation. such as: Document.forms ("FormName") changed to

JS Code

1. document.forms["FormName"];
2. //Also such as:   
3. document.getelementsbyname ("InputName") (1);
4. //Change to   
5. document.getelementsbyname ("InputName") [1];

[JS] View PlainCopyPrint?

2. Div object
In IE, a Div object can be used directly with an ID as an object variable name. Not in Firefox.
DivId.style.display = "None";
Workaround: document.getElementById ("divID"). Style.display = "None";
PS: The method of getting the object, whether it is a Div object or not, should use the getElementById method.


3. About Frame
Existing problem: In IE can use Window.testframe to obtain the FRAME,MF
Workaround: The main difference between Firefox and IE in the use of frame is:
If the following attributes are written in the frame tag:
Then IE can access this frame's window object by ID or name
MF can only access the window object of this frame through name.
For example, if the frame tag is written in the HTM inside the topmost window, you can access
IE:window.top.frameId or Window.top.frameName to access the Window object
Firefox: This is the only way to access the Window object Window.top.frameName
In addition, Window.top.document.getElementById ("Frameid") can be used in both MF and IE to access frame tags
And you can switch the contents of the frame by window.top.document.getElementById ("Testframe"). src = ' xx.htm '
You can also switch the contents of a frame by window.top.frameName.location = ' xx.htm '


4. Windows
Existing problem: in IE, modal and non-modal windows can be opened via ShowModalDialog and showModelessDialog, but Firefox does not support it.
WORKAROUND: Open a new window directly using the window.open (Pageurl,name,parameters) method.
If you need to pass parameters, you can use a frame or an IFRAME.


5. When defining various object variable names in JS, use the ID as much as possible to avoid using name.
In IE, the ID of an HTML object can be used directly as a subordinate object variable name for document. Not in Firefox, so use the ID as much as possible in your usual use, and avoid using only name, not ID.


6. document.all
Firefox can be compatible with document.all, but generates a warning. Can be replaced with getElementById ("*") or Getelementbytagname ("*")
However, for attributes such as document.all.length, they are completely incompatible. Everyone try not to use the Document.all property.


7. Parentelement
Parentelement and parentnode are supported in IE to get the parent node.
And Firefox can only use parentnode.


8. Event
Windows.event is not supported by the Consortium
For example, inside IE:

JS Code

1. function Onmenuclick () {
2. Collapsemenu (event.srcelement);
3. }  

[JS] View PlainCopyPrint?

Works fine. In Firefox, however, it is changed to:

JS Code

2. function Onmenuclick (evt) {
4. if(evt = = null)
6. evt = window.event; //For IE   
8. var srcelement = evt.srcelement? evt.srcElement:evt.target;
10. //IE uses srcelement, while Firefox uses target
12. Collapsemenu (srcelement);

[JS] View PlainCopyPrint?

9. Event.x and Event.y issues
In IE, the event object has x, y attribute, not in Firefox.
Workaround:
In Firefox, the equivalent of Event.x is Event.pagex. But not in Event.pagex ie.
Therefore, the use of Event.clientx instead of event.x. This variable is also available in IE.
Event.clientx and Event.pagex have subtle differences (when the entire page has scroll bars),
But most of the time it's equivalent.
If you want to be exactly the same, you can be a little more troublesome:

JS Code

1. MX = event.x? Event.x:event.pagex; [JS] View plaincopyprint?

and use MX instead of event.x.


10. Problem with Idname string to get Object
In IE, you can use Eval (idname) to get an HTML object with ID idname, not in Firefox.
Workaround: Use getElementById (idname) instead of eval (idname).


NodeName and TagName issues
In Firefox, all nodes have nodeName values, but textnode do not have tagName values.
The use of nodename in IE can sometimes be problematic.
Workaround:
Use TagName, but you should detect whether it is empty.


the Type property of the. Input
The Input.type property under IE is read-only, but can be modified under Firefox.


16. Custom Attributes
In MF, the attributes that you define must be getattribute () to obtain
and IE can directly through the "." Operator gets.


17.const Problem
The Const keyword cannot be used in IE. Such as
Const CONSTVAR = 32;
This is a syntax error in IE.
Workaround:
Do not use const, instead of Var.


. Body Object
The body of Firefox exists before the body tag is fully read into the browser, and IE must be present after the body is fully read.


resolution of ALT and title for IMG Objects
Alt: When the photo does not exist or the load error is prompted,
Title: Tip Description of the photo,
In IE, if the title,alt is not defined, it can also be used as an IMG tip, but in Firefox, both are used exactly as defined in the standard
When defining an IMG object, it is best to write both the ALT and title objects, guaranteeing proper use in various browsers


20.childNodes Gets the node
ChildNodes the meaning of the subscript is different in IE and Firefox, Firefox uses the DOM specification, ChildNodes inserts a blank text node.
When you get a child node, you can generally avoid this problem by Node.getelementsbytagname ().


21.removeNode ()
There is no Removenode method for nodes in Firefox, you must use the following methods

JS Code

1. node.parentNode.removeChild (node);

22.innerText
IE support, Firefox does not support
The content text in FF is set with the Textconent property.

the difference between XMLHTTP.
Firefox is created in the following ways:

JS Code

1. xmlhttp= New XMLHttpRequest ()

In IE, for:

JS Code

1. xmlhttp= New ActiveXObject ("Microsoft.XMLHTTP")

src Refresh issue for IMG
In IE can be used to refresh the picture, but not in Firefox. The main problem is caching, which is solved by adding a random number after the address:

JS Code

1. myimg.src= This . src+ '? '  +math.random ();

SetAttribute () Setting Property issues
Many properties in IE can not be set with setattribute, but Firefox is possible, such as:

JS Code

2. Thediv.setattribute (' style ',' color:red ');
4. //Change to:   
6. Object.style.cssText = ' color:red; '   ;
8.   
10.   
12. SetAttribute (' class ',' StyleClass ')
14. //Change to:   
16. SetAttribute (' className ',' StyleClass');
18.   
20.   
22. Obj.setattribute (' onclick ',' funcitonname (); '   );
24. //Change to:   
26. obj.onclick= function  () {fucntionname ();};

... Wait a minute

-----------------------------------------------------------------------------------------

The difference between IE and Firefox in parsing CSS

1. Analysis of the height
IE: Will vary according to the height of the content, including the undefined height of the picture content, even if the height is defined, when the content exceeds the height, the actual height will be used
Firefox: When there is no height defined, if the content is included in the contents of the image, the height of the Firefox resolution is based on the printing standards, which will result in a high degree of non-conformance with the actual content, when the height is defined, but the content exceeds the height, the content will exceed the defined height, but the style used by the area will , resulting in style dislocation.
Conclusion: It is best to define height when you can determine the height of the content, if there is no way to define the height, it is best not to use the border style, otherwise the style will definitely appear chaotic!


3. Layout issues
When you are writing CSS, especially with float:left (or right) to arrange a picture, you will find in Firefox normal and IE inside there is a problem. Whether you use margin:0, or border:0 to restrain, it is useless.
In fact, there is another problem, ie for the processing of space, Firefox is ignored and ie for blocks and blocks between the space is processed. That is to say a div after the end of a div to write, do not have a carriage return or space in the middle. Otherwise there may be problems, such as 3px deviations, and the reason is hard to find.
It was unfortunate that I had this problem again, multiple IMG tags attached, and then the definition of float:left, I hope these pictures can be linked together. But the results are normal in Firefox and every img shown in IE is 3px apart. I have no effect on removing the spaces between the tabs.
Later, the solution is to set up an IMG outside the Li, and the Li definition margin:0, which solves the IE and Firefox display deviation. IE's interpretation of some models can cause many error problems, and only a lot of attempts can be found.
This is just a few simple differences, in the layout and CSS design can be considered in a comprehensive, but the most effective and simple to solve the compatibility problem or table table, the table in terms of compatibility has a good performance.


4. Mouse Style
Firefox does not support hand, but IE supports pointer
Workaround: Use pointer uniformly

5. Padding issues
padding 5px 4px 3px 1px Firefox cannot explain shorthand,
Must be changed into padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

6. Elimination of UL, OL and other lists of indentation
Eliminate the UL, OL and other list of indentation style should be written: list-style:none;margin:0px;padding:0px;
Where the margin attribute is valid for IE, the padding attribute is valid for Firefox

7. CSS Transparency
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.

8. css Rounded Corners
IE: Rounded corners are not supported.
FF:-moz-border-radius:4px, or
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;.

9. CSS double-line bump border
ie:border:2px outset;.
Ff:
-moz-border-top-colors: #d4d0c8 White;
-moz-border-left-colors: #d4d0c8 White;
-moz-border-right-colors: #404040 #808080;
-moz-border-bottom-colors: #404040 #808080;

10. Filters
The use of filters is supported in IE and not supported in Firefox.

11. Prohibit the selection of Web content:
In IE generally with js:obj.onselectstart=function () {return false;};
and Firefox with Css:-moz-user-select:none;

Some usage of document.body and frequently asked questions in JS