JavaScript Css-dom

JavaScript Css-dom

A: Introduction

Javascriptcss-dom is a way to change the display of html-dom, the style, through JavaScript. such as Element.style.fontSize = 15em, in this form. Compared with CSS, css-dom can periodically repeat some style rendering or change, which is not possible by CSS.

Two: DOM Core html-dom css-dom Relationship

Domcore is the underlying method provided by the DOM API for manipulating page elements, such as obtaining element tags by ID, tag name, etc.

Html-dom is also a way for JavaScript to manipulate HTML elements, just in a different way, such as Document.body;element.href = value;

Css-dom is the way the JavaScript operation page displays styles, such as document.style.fontsize= 11px.

From the above, JavaScript seems to be competent for a Web page from construction to display, and dynamically change the structure of the Web page function. It's a good choice to be competent, but it doesn't mean that everything is done by JavaScript.

Three: three-tier architecture of Web pages

Structure layer (structure layer): Created by markup languages such as HTML or XHTML.

The presentation layer (presentation layer): is done by CSS and describes how the page is displayed.

Behavior layer (behavior layer): Responsible for how the content should be related to events, done by JavaScript language and Dom.

Layered thinking makes the division of labor more clear, more clear conditioning. Therefore, in product design, choose the most appropriate tool to solve the problem is the most basic principle. Although the above mentioned three-tier architecture is permeable, such as JavaScript can operate on three layers of any layer, CSS A:hover can complete JavaScript similar functions, in the design or should follow the selection of the most appropriate tool to solve the problem principle.

Four: examples

Show a table, odd and even row background color is different, when the mouse moved above the font becomes thicker.

Effect:

Key points:

To add a style to an element: Element.style.xxx = value;

Bind an event to an element: Element.onmouseover = function () {};

Changes the specified element style when the event is triggered.

The Displayabbreviations function in the previous article is used.

Addloadevent.js, displayabbreviations.js the previous article has.

Itinerary.html:

<! DOCTYPE html>
ITINERARY.CSS:
Body {    Font-family:helvetica, Arial, Sans-serif;    Background-color: #fff;    Color: #000;} Table {    Margin:auto;    border:1px solid #699;} caption {    Margin:auto;    padding:. 2em;    Font-size:1.2em;    Font-weight:bold;} th {    font-weight:normal;    Font-style:italic;    Text-align:left;    border:1px dotted #699;    Background-color: #9cc;    Color: #000;} Th, TD {    width:10em;    padding:. 5em;} /*tr:nth-child (odd) {    background-color: #ffc;} Tr:nth-child (even) {    background-color: #fff;} */.odd {    background-color: #ffc;}

Example.js:
function addclass (Elems, newclassname) {    if (!elems.classname) {        elems.classname = newclassname;    } else { C3/>var currentclassname = elems.classname;        var space = "";        Elems.classname = currentclassname + space + newclassname;    }} /** * Enhancing stripe table function. */function useclassstripetable () {    var tableelements = document.getelementsbytagname ("table");    var odd = true;    for (var i = 0; i < tableelements.length; i++) {        var trelements = Tableelements[i].getelementsbytagname ("tr"); 
   for (var j = 0; J < Trelements.length; J + +) {            if (odd) {                addclass (trelements[j], "odd");                Odd = false;            } else {                odd = true;}}}}    


JavaScript Css-dom