Home > Developer > Web Develop
This article describes a simple way to use the DOM to implement the ability to load images dynamically .
The previous article describes:
1 Dom Four common methods
First look at the effect, the initial is a photo album, you can click the navigation, switch the picture, and toggle the display below:
Click House to toggle another image on the fly
The code used is as follows:
<!doctype html>Body {font-family: "Helvetica", "Arial", sans-serif; Color: #333; Background-color: #ccc; Margin:1em10%; } h1 {color:#333; Background-color:transparent; } A {color: #c60; Background-color:transparent; Font-Weight:bold; Text-Decoration:none; } li {float: Left; Padding:1em; List-style:none; } img {clear:both; Display:block; } </style> functionShowpic (whichpic) {varSource = Whichpic.getattribute ("href"); varPlaceHolder = document.getElementById ("PlaceHolder"); Placeholder.setattribute ("SRC", source); varText = Whichpic.getattribute ("title"); varDescription = document.getElementById ("description"); Description.firstChild.nodeValue=text; } </script> </body>Code parsingIn this sample code, the main things to know are:
1 How to get the properties of an Element object
2 How to dynamically set property values for an element object
3 How to intercept the Click event
4 How to set element text dynamically
5 float Float
1&2 gets the properties of the Set element objectAs already described in the previous article, get the properties of the set element, you can use GetAttribute () and setattribute () two methods:
In the Showpic () function, by passing objects, you can call getattribute to get the link content of the property href, then get the picture object through the getElementById method and set its Src property value.
var source = Whichpic.getattribute ("href"); var placeHolder = document.getElementById ("PlaceHolder");p laceholder.setattribute ("src", source) ;
3 onclick EventsThe Showpic () method has been created above, as long as the object is passed in. So in the a tag, you can use the OnClick event.
The OnClick event, however, is to receive a bool value, which, if true, jumps to another page link by default, and, conversely, if it is false, it does not produce any results.
Therefore, the following should be written in the onclick event:
<a href= "Images/pig.png" title= "I ' m pig!" onclick= "showpic (this); return false;" >Pig</a>
4 Setting text dynamicallyIf you want to use the text of an element object, you can use NodeValue. However, if used directly, a null value is obtained.
Because the element object itself is free of text, it has childnodes objects, FirstChild, and LastChild objects.
Expand his ChildNodes property to discover that the property contains an object:
The object has the NodeValue attribute, which corresponds to the content of the label.
Because there is only one object in the label, you can get to the object using firstchild and lastchild or childnodes[0] .
The principle, similar to the previous article about the element node, the attribute node and the text node of the relationship, the text node is a child object of the element label node, so it is not possible to use nodevalue directly to get the label text, but need to get its child object, to get nodevalue.
5 float FloatIf you do not set the IMG CSS style, you will find that we want to make the Li label in the UL level display, the result is sufficient in the case of width, IMG also followed the level display.
What is this for?
Check the data found that the original document objects are displayed according to the document layout: From top to bottom, from left to right, encountered block-level elements are wrapped, and encountered inline elements are filled.
If you use float to float, it breaks the layout, and if you set the Float property on the object, it will cause a certain gap in the layout of the document, and the void will fill the next element.
So in the picture layout above, the IMG element floats along with the Li float in the UL.
The Clear:both is designed to prevent the layout confusion caused by float, and you can use clear to clear the layout settings. This way, IMG will not have the same float effect as the previous Li.
But while floating is cleared, the IMG element is an inline element, so you can create a newline effect by simply converting it to block-level elements.
img { clear:both; Display:block; }
Reference"1" Float explanation: http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html
2 "JavaScript DOM programming Art"
"3" skillfully used clear:both:http://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html
"4" display:http://www.w3school.com.cn/cssref/pr_class_display.asp
"5" block-level elements and inline elements: http://www.cnblogs.com/NetSos/archive/2010/08/31/1814223.html
Web must know--use DOM to complete property padding
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
