JavaScript第四章：JavaScript_javascript前端开发案例教程第四章-优快云博客

本文介绍了一个简单的JavaScript函数，用于动态更改网页上图片的源。该函数接收一个包含图片链接的参数，并更新页面中预设占位符图片的源。文中还探讨了两种不同方法：使用setAttribute方法和直接赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

把占位符上的图片替换成想要查看的图片，可以利用setAttribute改变它的src属性。

我们要写一个函数，函数有一个参数及图片的链接。它可以通过改变占位符的src属性更换为参数图片。

function showPic(whichPic)
//whichPic为元素节点，在本例中就是指向某图片<a>元素

whichPic.getAttribute（“href”）
//分离出图片的文件路径

var source=whichPic.getAttribute("href");
//将图片的文件路径保存在变量source中

var placeholder=document.getElementById("placeholder")
//获取占位符图片

placeholder.setAttribute("src",source);
//通过setAttribute对placeholder元素的属性进行刷新

1.非DOM解决方案

setAttribute方法是第一级DOM的组成部分，可以设置任何元素节点的属性值。

下面我们将讨论不使用setAttribute来改变元素的属性。

第一级DOM的优势：

可以修改任何元素节点的任何属性值

可移植性强，可适用于多种环境和多种程序设计语言的通用API

  element.value="the new value";
  element.setAttribute("value","the new value");
 //上面两个语句是等价的

  placeholder.src=source;

2.最终的函数代码清单

  function showPic(whichPic){
     var source=whichPic.getAttribute(""href");
     var placeholder=document.getElementById("placeholder");
     placeholder.setAttribute("src",source);
}