广告
返回顶部
首页 > 资讯 > 前端开发 > html >如何在JavaScript添加图片
  • 476
分享到

如何在JavaScript添加图片

2024-04-02 19:04:59 476人浏览 独家记忆
摘要

本篇内容主要讲解“如何在javascript添加图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何在JavaScript添加图片”吧!

本篇内容主要讲解“如何在javascript添加图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何在JavaScript添加图片”吧!

想要使用JavaScript添加图片,可以先使用createElement()方法创建一个img元素,并向img元素的src属性赋图片的URL地址值;然后使用appendChild()方法将img元素添加到指定dom对象中即可。

教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

想要使用JavaScript添加图片,可以先使用createElement()方法创建一个img元素,并向img元素的src属性赋图片的URL地址值;然后使用appendChild()方法将img元素添加到指定dom对象中,即可。

createElement() 方法

createElement() 方法通过指定名称创建一个元素

语法:

document.createElement(nodename)

参数:nodename:必须。创建元素的名称。

返回值:创建的元素节点

getElementById() 方法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

html DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

如果没有指定 ID 的元素返回 null

如果存在多个指定ID的元素则返回 undefined。

语法:

document.getElementById(elementID)

appendChild() 方法

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

提示:如果文档树中已经存在了 newchild,它将从文档树中删除,然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点,则不会直接插入它,而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。

你可以使用 appendChild() 方法移除元素到另外一个元素。

语法:

node.appendChild(node)

参数:node:必须。你要添加的节点对象。

示例:JavaScript向div元素中添加图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript">
			window.onload = function() {
				var bigImg = document.createElement("img"); //创建一个img元素

				bigImg.src = "loGo.png"; //给img元素的src属性赋值
				//bigImg.width="320";  //320个像素 不用加px
				var myp = document.getElementById('myp'); //获得dom对象
				myp.appendChild(bigImg); //为dom添加子元素img

			};
		</script>
	</head>
	<body>
		<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
	</body>

</html>

到此,相信大家对“如何在JavaScript添加图片”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 如何在JavaScript添加图片

本文链接: https://www.lsjlt.com/news/75228.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在JavaScript添加图片
    本篇内容主要讲解“如何在JavaScript添加图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何在JavaScript添加图片”吧! ...
    99+
    2022-10-19
  • android如何在布局中添加图片
    在Android布局中添加图片有多种方式,以下是其中几种常用的方法:1. 使用ImageView控件:将ImageView控件添加到...
    99+
    2023-09-27
    android
  • vue如何在图片上添加文字
    在Vue中,我们可以使用CSS将文本叠加在图片上,或者使用HTML5的Canvas来绘制图片和文本。以下是两种方法的示例:方法一:使...
    99+
    2023-08-08
    vue
  • html中如何在图片上添加文字
    这篇文章主要介绍“html中如何在图片上添加文字”,在日常操作中,相信很多人在html中如何在图片上添加文字问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html中如何在图片...
    99+
    2022-10-19
  • java web中如何添加图片
    java web中如何添加图片对于java可视化界面插入背景图片只需要background-image:url(图片路径)就行,而对于web项目中,并非如此效果如下:我们就需要在jsp页面中写Java代码,让Java来获取项目的根路径,通过...
    99+
    2017-11-07
    java教程 java web 添加图片
  • 如何在java窗体程序中添加图片
    打开eclipse,创建一个java工程项目,创建完后在src下新建一个类Window,由于要插入图片,所以还在工程目录下创建一个文件夹imgs,里面放了一张60*60的图片,创建后的工程目录和图片,如图:在Window.java中写入如图...
    99+
    2019-03-16
    java 窗体程序 添加图片
  • 如何在html5中为图片添加动画效果
    本篇文章给大家分享的是有关如何在html5中为图片添加动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。html是什么html的全称为超文本标记语言,它是一种标记语言,包含...
    99+
    2023-06-06
  • Qt如何为exe添加ico图片
    这篇文章主要介绍了Qt如何为exe添加ico图片的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Qt如何为exe添加ico图片文章都会有所收获,下面我们一起来看看吧。1、创建文件夹以及准备文件在工程顶级目录下创建...
    99+
    2023-07-02
  • Python如何为图片添加水印
    添加水印的主要目的是为了版权保护,使自己的图像不被抄袭或者恶意转载。网上有很多制作水印的工具,本帖介绍怎么使用Python-Pillow库给图片添加水印。 使用ImageMagick添加图片水印-Linux...
    99+
    2022-06-04
    水印 何为 图片
  • android studio如何添加背景图片
    在Android Studio中,要添加背景图片,可以按照以下步骤进行操作:1. 在项目的res目录中,找到或创建一个drawabl...
    99+
    2023-08-23
    android studio
  • Dreamweaver在网页中怎么添加图片
    这篇文章主要讲解了“Dreamweaver在网页中怎么添加图片”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Dreamweaver在网页中怎么添加图片”吧!步骤网页中使用图片的原则是:在保证...
    99+
    2023-06-08
  • java怎么在图片上添加文字
    要在Java中给图片添加文字,可以使用Graphics2D类。下面是一个简单的示例代码,演示如何在图片上添加文字:```javaim...
    99+
    2023-08-20
    java
  • android怎么在布局中添加图片
    在Android布局中添加图片可以通过使用ImageView控件来实现。以下是一个简单的示例:1. 首先,将图片文件添加到项目的`r...
    99+
    2023-08-16
    android
  • HTML怎么在图片上添加文字
    本篇内容主要讲解“HTML怎么在图片上添加文字”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML怎么在图片上添加文字”吧!首先我们要设计一个 div,将图片的和文字放置在 div 里面,设置...
    99+
    2023-06-27
  • vue怎么添加图片
    vue添加图片的方法:1、可以在data写入图片路径并保存;2、通过使用require()函数方法直接访问图片路径;3、将图片全部存入一个json文件中,然后在vue页面中使用“import ”方法引入储存图片的json文件即可。...
    99+
    2022-10-15
  • mysql语句怎么在表中添加图片
    在 MySQL 表中添加图片,通常是通过将图片的二进制数据存储在表的某个列中。以下是一个示例的 MySQL 语句来创建一个包含图片的...
    99+
    2023-09-23
    mysql
  • 怎么在html中给图片添加边框
    怎么在html中给图片添加边框?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将...
    99+
    2023-06-06
  • windows怎么在图片上面添加文字
    这篇文章主要介绍“windows怎么在图片上面添加文字”,在日常操作中,相信很多人在windows怎么在图片上面添加文字问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”windows怎么在图片上面添加文字”的疑...
    99+
    2023-07-02
  • 是否可以在sublime text中添加图片
    小编给大家分享一下是否可以在sublime text中添加图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!可以在sublime text中写代码,那是否可以在s...
    99+
    2023-06-21
  • html添加图片的方法
    这篇文章给大家分享的是有关html添加图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统...
    99+
    2023-06-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作