JS动态修改图片的URL(src)的方法_javascript技巧

本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下:

下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的

<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="hackanm.gif";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSrc()" value="Change image">
<p><b>Note:</b> The src property can be changed at any time.
However, the new image inherits the height and width
attributes of the original image,
if not new height and width properties are specified.</p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 图片
, url
, src
动态修改
javascript src 动态、video src动态添加url、javascript src、javascript img src、javascript 修改src,以便于您获取更多的相关知识。

时间: 2024-09-30 01:30:03

JS动态修改图片的URL(src)的方法_javascript技巧的相关文章

JS动态修改iframe高度和宽度的方法_javascript技巧

本文实例讲述了JS动态修改iframe高度和宽度的方法.分享给大家供大家参考.具体如下: 如果希望通过按钮动态修改iframe的高度和宽度,可以参考下面的JS代码 <!DOCTYPE html> <html> <head> <script> function changeSize() { document.getElementById("myframe").height="300"; document.getEleme

JS动态修改表格cellPadding和cellSpacing的方法_javascript技巧

本文实例讲述了JS动态修改表格cellPadding和cellSpacing的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过修改表格对象的cellPadding和cellSpacing属性来修改表格单元格的间距 <!DOCTYPE html> <html> <head> <script> function padding() { document.getElementById('myTable').cellPadding="15&quo

JS实现简易图片轮播效果的方法_javascript技巧

本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

js动态创建及移除div的方法_javascript技巧

本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementByIdx_x("newD")!=null) document.body.removeChild(document.getElementByIdx_x("newD")); var Div = document.create_rElement("div");/

js实现双击图片放大单击缩小的方法_javascript技巧

本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT

JS动态给对象添加事件的简单方法_javascript技巧

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件: <div> <input type="text" id="txtPrice" name = "txtPrice" value = "0"/> <div> 现在我们为其动态添加一事件,JS核心代码如下: document.getElementById("txt

js实现背景图片感应鼠标变化的方法_javascript技巧

本文实例讲述了js实现背景图片感应鼠标变化的方法.分享给大家供大家参考.具体分析如下: 鼠标点击后背景图片变化,点击另外一个菜单项前面的会自动恢复背景,其实这个如果单纯使用CSS是没办法做的,我们还要使用JS来判断鼠标状态,代码如下: <style type="text/css"> .dh a{ background:#FFFFCC; width:50px; height:30px; display:block; text-align:center; color:#0000

JS 动态加载脚本的4种方法_javascript技巧

如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4种比较常用的方法,大家可以根据情况选择,最后 将会给推荐一个.1.直接document.write 复制代码 代码如下: <script language="javascript"> document.write("<script src='test.js'><\/script>"); </script> 2.动态改变已有script的src属性 复制代

Ext JS动态加载JavaScript创建窗体的方法_javascript技巧

JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构: 项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等.  2 数据库表结构可以用下面的SQL在MSSQL中创建表,其中JavaScriptCo