Home > Developer > JavaScript
No more nonsense. Direct Sticker Code
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> processing of Javascrpit images </title>
<script type= "Text/javascript" >
function Showpic (whichpic) {
var Source = Whichpic.getattribute ("href");
var last = document.getElementById ("last");
Last.setattribute ("src", source);
var text=whichpic.getattribute ("title");
var Decoration=document.getelementbyid ("decoration");
Decoration.firstchild.nodevalue=text;
}
</script>
<style type= "Text/css" >
body{margin:0px; padding:0px;}
A{text-decoration:none;}
Li{list-style-type:none;}
. man{}
. Man ul{}
. man ul li{float:left; margin-bottom:50px;}
. Man ul li a{padding:0 50px};
. Man Img{display:block;}
P{font-size:2em;}
</style>
<body>
<div class= "Man" >
<ul>
<li><a href= "Images/2.jpg" title= "1" onclick= "showpic (this); return false; " >1</a></li>
<li><a href= "Images/3.jpg" title= "2" onclick= "showpic (this); return false; " >2</a></li>
<li><a href= "Images/4.jpg" title= "3" onclick= "showpic (this); return false; " >3</a></li>
<li><a href= "Images/6.jpg" title= "4" onclick= "showpic (this); return false; " >4</a></li>
</ul>
<div style= "Clear:both" ></div>
<p id= "Decoration" > The current value is 5</p>
</div>
</body>
Idea question: 1: Create a new JavaScript program, get the path (HREF) property value of the picture via the GetAttribute property
By document.getElementById the ID of the placeholder picture, and then according to get to find an ID, through the properties of setattribute to modify the position of the placeholder picture, so as to achieve the purpose of modifying the picture. is to pass the address inside the Li a tag to the placeholder src attribute. Thus achieving the effect
2: To modify the text value inside the p tag below the placeholder image. The first is to get the value of the title in the Li a property by GetAttribute, then get the ID value of the P tag according to document.getElementById, and then use the ID value of the P tag to get the Child.nodevalue the value of Li A to the ID of the P tag to achieve the purpose
The attributes that need attention are:
GetAttribute: We can use the GetAttribute () method to query the values of its various properties. The GetAttribute () method cannot be called through the Document object, unlike the other methods we have described earlier. We can call it only through an element node object.
The Setattribute:setattribute () method has a fundamental difference from them: it allows us to make changes to the value of the attribute node. Similar to the GetAttribute () method, the SetAttribute () method is also a function that can be called only through an element node object, but the SetAttribute () method requires that we pass two parameters to it:
Firstchild.nodevalue:
Suppose we already have a DOM object whose contents are as
Content
In JavaScript, we generally need to do this in order to get the label and text of the title
var title =dom.getelementsbytagname ("title");
alert (title[0].nodename);//get "title"
When alert (title[0].nodevalue), FF can only get #text, and IE can only get null
Later, a lot of information, object text type or object element, itself is a node
In the example above, "title" is not a simple textual content, but a text node.
It also has its own nodename, but it shouldn't be used.
So it should be written as:
alert (title[0].firstchild.nodevalue);//get "title"
On the other hand, thinking in turn, when generating a text, it is also used Create_text_node method
I also used append_child to add it under a parent node.
Description It is actually a node that needs to be used more once FirstChild
Javascript+dom making JavaScript Pictures library
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
