Foreword
HTML is a markup language, HTML documents written by a label elements and text can be described as a web browser. Usually implemented in case the page is HTML, CSS and Javascript to complete the combination of the three, the structure responsible for HTML pages, CSS rendering style page elements, and Javascript script to the web page adds dynamic behavior, such as in response to user behavior.
It is well known on the web drawing is a very difficult thing, developers need to use third-party plug-ins to achieve under normal circumstances, the current HTML5 canvas element can be introduced to draw lines, shapes, add text and images on a page by JavaScript and other large drawing the needs of some, but there are still compatibility issues, such as Firefox3.0 +, Chrome3.0 + support, but IE is supported in version 9.0 after the start (as shown below mainstream browser version of IE8 application profile can be seen still widely). Therefore, under article describes how to use the most basic way to achieve drawing.
DOM Introduction
Because here is dynamically generated by JavaScript graphic way, then before the introduction of the implementation, it is necessary to mention the next DOM (Document Object Model), which is a W3C-recommended treatment Extensible Markup Language (HTMLXML) of standard programming interfaces, object organization will document in a tree structure model, the entire document is mapped to a file by the hierarchy of nodes, and object-oriented way to describe the relationship between the behavior of each object file, as well as the properties of these objects , can be accessed by JavaScript and HTML documents for all operations on objects, such as dynamically add, delete and modify various elements.
As shown below, each block is a document node, in total includes three nodes, a root tree is a document (Document) node, representative of the document, an element (Element) nodes represent elements in HTML, text ( text) node represents a text.
While the node has another node in the tree hierarchy, as shown below, <html> node is the root node, is at a <head> and <body> node, they have the same parent, sibling peer belongs, and so on.
Here are some common DOM object methods, for your reference (see details can be found on the website W3school), plotting ways to achieve these common methods are mainly based.
The basic process of drawing graphics is individually added to the page arrangement position the desired display element node, comprises:
-
Create a DOM node
var oDiv = document.createElement('div'); -
Adding Style: (Style object properties set the style / Class inheritance external file defined style)
document.getElementById("id").style.property="值" object.className=classname -
DOM node to node insertion :( inserted at the end of the parent node / node is inserted into the front of a sibling of the parent node)
document.body.appendChild(oDiv); //把div插入到body中，并且位于末尾 var oP = createElement('p'); //创建一个p节点 document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面 - Positioning arrangement position: CSS position property to establish a positioning mechanism used in the layout element, an element that we can appear anywhere on the page, the following figure shows the parameter values and usage position attributes. Absolute absolute positioning mode using text, such as the left: 100px; top: 150px; 100px presentation element from the left page, from the top of the page 150px.
The example code
-
Block Implementation: three rows of blocks arranged 1 2 3 absolute positioning location is arranged according to the positioning requirements. HTML and CSS contents page generating block as shown below, rootPen inherited characteristics btn-flat pattern, and some parameters redefined.
for (var k = 0; k < 3; k++) {//三行 topsize = 150*k; leftsize = 600 - 65*k; for (var j = 0; j < k+1; j++) {//每行k+1个方框 var divNewele = document.createElement('div'); divNewele.className = "btn-flat rootPen"//css文件定义样式 divNewele.style.position = 'absolute';//页面绝对定位 leftsize = leftsize+150; divNewele.style.left = String(leftsize)+ "px"; divNewele.style.top = String(topsize)+ "px"; parent.appendChild(divNewele); } } /* CSS方框样式 */ .btn-flat.rootPen { padding: 8px 8px 8px 1px; font-size: 13px; color: #1a2129; text-align: center; width: 80px; height:60px; margin-top: 1%; background: #e6ebf3; border: 1px solid #d8dde4; box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 0px 0px #cccccc; } .btn-flat.rootPen:active { background: #e0e6ef; -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset; } .btn-flat.rootPen i { font-size: 14px; }
-
Cable realization: Principles and Implementation box of the same, but differ in style, since all begin with page elements appear in block form, then realize we need to modify the CSS property values when connecting lines, horizontal display width value 0px is, when the vertical display height is 0px.
/* CSS画线 */ .line{ border:3px solid #000000; margin-left:20px; position:absolute; } .horLine { height:0px; } .verLine { width:0px; } - Text implement: displaying text nodes can continue to add a text element createTextNode in block in block.
to sum up
Ultimately block topology as follows, based on the drawing of the method needs more focused on the drawing simpler, but compatible version of the browser where wide (especially IE8 compatible), the main disadvantage of this method is the need calculated in advance the layout position of each element, and rendering more complex shaded below, the workload is large curve. In addition, the current restrictions canvas for IE8 can be solved by open source projects ExplorerCanvas, follow-up will explain how.
