JavaScript CSS-DOM

JavaScript CSS-DOM
JavaScript CSS-DOM

I. Introduction

JavaScriptCSS-DOM is a JavaScript to change the display form of the HTML-DOM, that is, the style. Such as element. style. fontSize = 15em. Compared with CSS, The CSS-DOM can regularly and repeatedly execute some style rendering or changes, which is not implemented by CSS.

2: DOM Core HTML-DOM CSS-DOM relationship

DOMCore is a basic method provided by dom api for page elements, such as Retrieving Element tags Based on id and Tag name.

HTML-DOM is also the JavaScript method used to operate HTML elements, but the method is different, such as document. body; element. href = value; and so on.

CSS-DOM is a JavaScript operation page display style, such as document. style. fontSize = 11px and so on.

From the above perspective, JavaScript seems to be competent for a webpage's function from construction to display, and dynamically changing the webpage structure style. Is competent, but does not mean that everything is done by JavaScript is a good choice.

Iii. Three-tier architecture of web pages

Structure layer: It is created by Markup languages such as HTML and XHTML.

Presentation layer: CSS is responsible for describing how a webpage is displayed.

Behavior layer: responsible for how the content should respond to events, completed by the JavaScript language and DOM.

The idea of hierarchy makes the division of labor clearer and the adjustment clearer. Therefore, in product design, selecting the most appropriate tool to solve the problem is the most basic principle. Although the layer-3 architecture mentioned above is infiltrated, for example, JavaScript can operate on any layer-3, a of CSS: hover can complete similar JavaScript functions, and should still follow the principle of selecting the most suitable tool to solve the problem in the design.

Iv. Instances

Displays a table. The background color of the odd and even rows is different. The font becomes thicker when the mouse moves over the table.

Effect:

Key points:

Add a style for the element: element. style. xxx = value;

Bind event to element: element. onmouseover = function (){}; <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + ICAgICAgICC0pbeiysK8/combine + crop = "brush: java;"> Itinerary <Script src = ".. /js/example. js "> </script> <script src = ".. /js/displayAbbreviations. js "> </script> <script src = ".. /js/heightLightRow. js "> </script> <script src = ".. /js/addLoadEvent. js "> </script>

Itinerary

When	Where
June 9th	Portland, OR
June 10th	Seattle, WA
June 12th	Sacramento, CA

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 {        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;            }        }    }}