Javascript使用案例（1）

最新推荐文章于 2022-10-12 19:22:28 发布

mxd_neu

最新推荐文章于 2022-10-12 19:22:28 发布

阅读量224

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/mxd_neu/article/details/48166949

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在网页上实现图片与文字的替换

运用DOM的五个常用方法

1.getElementById;

2.getElementsByTagName;

3.getElementByClassName;

4.getAttribute;

5.setAttribute;

来进行图片的替换

 whichpic.getAttribute("href");
 var source = whichpic.getAttribute("href");
/* document.getElementById("placeholder");*/
 var placeholder = document.getElementById("placeholder");
 placeholder.setAttribute("src",source);

具体实现js代码。

进行文字的替换

DOM属性

1.childNodes;

2.nodeType;

3.nodeValue;

4.firstChild;

5.lastChild;

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;

实现代码。

整体代码

html部分

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link href="layout.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Snapshots</h1>
<ul>
    <li>
        <a href="11.jpg" οnclick="showPic(this); return false;" title="first lady">First Lady</a>
    </li><!--添加return false 是防止点击事件出发后被转到原来界面-->
    <li>
        <a href="12.jpg" οnclick="showPic(this); return false;" title="second lady">Second Lady</a>
    </li>
    <li>
        <a href="13.jpg" οnclick="showPic(this); return false;" title="third lady">Third Lady</a>
    </li>
    <li>
        <a href="14.jpg" οnclick="showPic(this); return false;" title="forth lady">Forth Lady</a>
    </li>

</ul>
<img id="placeholder" src="15.jpg" alt=" my image gallery">
<p id="description">Choose an image.</p>
<script  type="text/javascript"  src="01.js"></script>
</body>
</html>

js部分

/**
 * Created by Administrator on 2015/9/1.
 */
function showPic(whichpic){
    whichpic.getAttribute("href");
    var source = whichpic.getAttribute("href");
   /* document.getElementById("placeholder");*/
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
}

function countBodyChildren(){
    var body_element = document.getElementsByTagName("body")[0];
/*    alert(body_element.childNodes.length);*/
    alert(body_element.nodeType);
}
/*window.onload = countBodyChildren;*/

css美化部分

body{
    font-family: "Helvetica","Arial",serif;
    color:#333;
    background-color: #ccc;
    margin: 1em 10%;
}
h1{
    color: #333;
    background-color: transparent;
}
a{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul{
    padding: 0;
}
li{
    float:left;
    padding: 1em;
    list-style: none;
}
img{
    display: block;
    clear: both;
}

mxd_neu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript使用案例（1）

在网页上实现图片与文字的替换运用DOM的五个常用方法1.getElementById;2.getElementsByTagName;3.getElementByClassName;4.getAttribute;5.setAttribute;来进行图片的替换 whichpic.getAttribute("href"); var source = whichpic
复制链接

扫一扫

专栏目录