This article describes the differences between IE and Navigator to implement DHTML standards, especially how to write DHTML programs in Navigator.
DHTML (Dynamic HTML) is a new specification proposed by W3C organization. It has made many extensions for the original HTML, combined with JavaScript, making static HTML pages produced many dynamic effects, such as menus expansion and collapse. The appearance of the page element is dynamically changed. IE 4.0 or more, Navigator 4.0 or more supports this standard. However, different browser manufacturers have done varying degrees to it. Take the most popular IE and NS as an example, IE achieves closer to W3C scheme, and NS, telling the truth, and the W3C plan difference is very different, and it is not fully realized, and it can even be said to another set. When I first read DHTML, I wrote a few small programs in accordance with the book, and I will try to pass on the IE, and I can say that I will have a solution to the metric. Since there are few books with DHTML implementation programs in the market (probably NS do not meet the standards due to standards), and the real business website should at least support the two main browsers IE and NS, I am willing to put me. Some experiences have been shared with everyone, so that everyone will not have to walk away. For the same part of the implementation of the two, this article makes a brief introduction, if you are interested, you can refer to your book or online resource.
DHTML is actually consisting of three and two parts: CSS (Cascade style Sheet, cascade style sheet), layer (Layer), and JavaScript.
The so-called CSS, conceptually similar to class in C , indicating an appearance style of the element in a class definition, such as font, color, size, etc. Features; you can also define a style for some html element, so that all such elements in the page have the same appearance. If such a style definitions exists in a separate .css file (in the existence of the class definition in C . H file), then contain it in the page, all the page of a website has the same appearance. . IE and NS are basically the same as the implementation of CSS, and this is no longer detailed.
The difference between the two is mainly reflected in the implementation of the layer. The so-called layer is a zone on the page, which can contain any HTML elements, by changing the properties of the layer, the elements between the layers can follow, disappear, change, move, and more. In IE, relying on
Where Style Definition is a set of semicolon-separated style definitions, which are commonly used:
Position: Its value can be Absolute and Relative, so-called ABSOLUTE, the content of the layer does not have to be arranged in the browser in order, but can be positioned in the browser user area in the order of the appearance, but can be positioned to the browser user area. The Relative (relative positioning) is arranged in a layer in sequence. Left, Top, Width, Height: The left upper corner coordinates of the layer and its width and height.
Z-Index: Since the layer can be placed anywhere in the page, when it coincides with other content, the z-index value is displayed on the top, and the Z-index value of all layers is 1. However, in NS, all form elements (text boxes, list boxes, buttons, etc.), as long as they are visible, and no matter how much z-index value. Therefore, when you design a page, be careful not to place a form element on the location of the dynamically or hidden elements (eg, the pop-up menu).
Visibility: Indicates whether the layer is visible, by dynamically change this value in the program, you can achieve the appearance and disappearance of the layer, such as the drop-down menu, depending on it. Its three candidates are: inherit, visibility with the visibility of the parent element; visible, visible (SHOW in NS); Hidden, is invisible (HIDE in NS).
Ns also supports these two tags, but supports very bad, often there are some inexplicable mistakes, I think this may be due to strategies, and it is not good to be NS products. Ns introduces two two tags,
Different browsers have reflected in the following points:
References in the layer. In IE, each programmable element on the page (not only layers, but also any other elements indicating the ID value, see below) is one of the Document.all collection; and in the NS, each page A layer, whether it is defined in the above four markers, both an absolute or relative positioning, is a set of document.layers. Therefore, if you want to reference the layer named Layer1, it should be symmeled by the following:
IE: Document.all ["Layer1"] or Document.all.Layer1
NS: Document.Layers ["layer1"] or Document.Layers.Layer1
2. The coordinates and size of the layer. In IE, each of the properties, such as position, size, color, etc. involved in layers are set in the standle attribute set, such as the left upper corner X coordinate of the layer as Document.all.layer1.Style.pixelleft Y coordinate is document.all.layer1.style.pixeltop, the width is document.all.layer1.style.pixelwidth, the height is Document.all.Layer1.Style.pixelheight. There are also groups of properties such as scrollxxx, offsetxxx, clientxxx, where xxx is Left, Top, Width, Height, respectively describe the scrolling, displacement, customer area, etc. of the layer, see the description of the coordinate in the MSDN. In NS, each layer has a CLIP property set, x, y, width, and height is a collection element of this set. In addition, all elements in IE have the same coordinate system, whether it is located outside or within the layer; in NS, each layer has a separate coordinate system.
3. The content of the layer. The layers in IE include innerHTML and OUTERHTML properties (because the appearance of the layer is not described, they are not elements of the Style property set, but the properties of the layer), the meaning of the layer is as follows:
InnerHTML: HTML code in the layer, but does not include the definition of layers.
OuterHTML: HTML code in the layer, and includes the definition of the layer.
Changing these attribute values can change the contents of the layer, the following statement change layer Layer1 content is a thicker string "layer1": Document.all.Layer1.innerhtml = " layer1 ", in NS In each document, the element in each Document.Layers, that is, one layer, all NS is considered a separate window, with independent document properties, just like the document attribute in JavaScript, can dynamically change by calling the Document.Write function Layer content. The above case should be modified in NS:
Document.Layers.Layer1.Document.Open ();
Doucment.Layers.Layer1.write ("
Document.Layers.Layer1.document.Close;
Similarly, other programmable elements in the layer, such as an image, which reference syntax is as follows: Document.Layers.Layer1.Document.Images [imgname], and if the image is outside the layer, its grammar should be Document.Images [IMGNAME], in IE, whether the image is within or outside the layer, its grammar is the latter.
JavaScript is a scripting scripting language that Netscape first proposed by Netscape, which is then extended to the server. Its grammar and concept are similar to C , but there is no C as strict. IE also supports client JavaScript (Microsoft also launches similar, more powerful VBScript, but NS is not supported). The two browsers are the same, but they have made many different extensions on it, but in the DHTML programming, these extensions need to be used. Since there is no standard, it has not been able to follow the same place. For example, the width of the browser's client area is Document.Body.ClientWidth in IE, which is Window.innerWidth in NS; for example, if you want to know how much pixels are scrolled by the user pressing the scroll bar in the browser, in IE is Document .body.scrolltop, in NS is Window.pageyoffset. In this case, you can only check the documents of the two. The JavaScript documentation of IE is included in the MSDN or downloaded separately from Microsoft's site. NS's JavaScript documentation can be downloaded on http://developer.netscape.com, where NS's DHTML document can be obtained. NS does not implement the function.
1.IE, any elements in the page are programmable, as long as the ID attribute is given, its syntax is as follows:
In NS, it cannot be programmed unless the element is in the layer.
2. TRANSIE is added to the transition and filter (Filter) effect, and there is no NS.
3. IE supports the data binding of the client (Data Bind), that is, an element in the page (such as a table in the table) can be bound to a field of the server's database, in the case where the data content is constant You can change the form of the page without having to access the database again (eg, reordering a field). Ns also does not implement this feature.
The above is listed so many differences, then how do we write a cross-browser DHTML page? One way is to write two separate pages, and redirect to different pages in the portfolio different from the browser, such as:
