广告
返回顶部
首页 > 资讯 > 前端开发 > html >javascript如何设置img内容
  • 815
分享到

javascript如何设置img内容

2024-04-02 19:04:59 815人浏览 安东尼
摘要

这篇文章主要介绍javascript如何设置img内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! img标签的内容主要由src属性控制,在javasc

这篇文章主要介绍javascript如何设置img内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

img标签的内容主要由src属性控制,在javascript中可以利用setAttribute()方法来设置img标签src属性的值,进而设置img内容,语法“img元素对象.setAttribute("src","属性值")”。

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

<img> 标签定义 html 页面中的图像。

<img> 标签有两个必需的属性:src 和 alt。

src 标签的 src 属性是必需的。它规定图像的 URL。

当一个网页加载时,浏览器从 WEB 服务器上获取图像,并把它插入到页面中。因此,确保图像与相关的网页在同一点,否则访问者可能会得到一个损坏的链接图标。如果浏览器找不到图像时,会显示损坏的链接图标。

javascript设置img内容

在javascript中,可以利用setAttribute()方法来设置img内容。

setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。

示例:

<!DOCTYPE html>
<html>
<body>

<img src="img/1.jpg" width="200"/>

<p id="demo">点击按钮来改变img标签的内容。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
document.getElementsByTagName("img")[0].setAttribute("src","img/2.jpg"); 
}
</script>

</body>
</html>

效果图:

javascript如何设置img内容

以上是“javascript如何设置img内容”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: javascript如何设置img内容

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

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

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

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

下载Word文档
猜你喜欢
  • javascript如何设置img内容
    这篇文章主要介绍javascript如何设置img内容,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! img标签的内容主要由src属性控制,在javasc...
    99+
    2022-10-19
  • javascript如何设置img src值
    本篇内容介绍了“javascript如何设置img src值”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2022-10-19
  • php如何实现内容去掉img
    这篇文章主要介绍“php如何实现内容去掉img”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php如何实现内容去掉img”文章能帮助大家解决问题。php内容去掉img的方法:1、创建PHP示例文件;...
    99+
    2023-06-28
  • css如何设置img的src
    这篇文章主要介绍了css如何设置img的src,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css设置img的src的方法:首先创建一个HTML示例文件;然后通过设置css代...
    99+
    2023-06-06
  • jQuery如何设置内容
    这篇文章将为大家详细讲解有关jQuery如何设置内容,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。设置内容 - text()、html() 以及 val()设置内容方法t...
    99+
    2022-10-19
  • img标签内如何使用style设置CSS改变大小
    这篇文章将为大家详细讲解有关img标签内如何使用style设置CSS改变大小,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。<img src="图...
    99+
    2022-10-19
  • css3如何设置img水平翻转
    这篇文章主要介绍了css3如何设置img水平翻转的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css3如何设置img水平翻转文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • vb标签内容如何设置
    VB标签的内容可以通过以下两种方式进行设置: 通过属性设置:可以使用标签的属性来设置标签的内容。例如,使用`Text`属性可以设置...
    99+
    2023-10-28
    vb
  • css如何设置img的图片大小
    这篇文章主要讲解了“css如何设置img的图片大小”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何设置img的图片大小”吧! ...
    99+
    2022-10-19
  • css中img元素如何设置高宽
    本篇内容介绍了“css中img元素如何设置高宽”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • HTML如何设置td内容居中
    这篇文章主要讲解了“HTML如何设置td内容居中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML如何设置td内容居中”吧! ...
    99+
    2022-10-19
  • jquery设置a内容
    在网站开发中,我们经常需要修改页面上的链接文字(即a标签中的内容)。一种简便的方式是使用jQuery库中的相关方法来实现。下面是具体的实现方法。首先,我们需要有一个含有a标签的HTML页面,例如:<a href="http:...
    99+
    2023-05-19
  • 怎么在javascript中设置元素文本内容
    这篇文章给大家介绍怎么在javascript中设置元素文本内容,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。javascript是一种什么语言javascript是一种动态类型、弱类型的语言,基于对象和事件驱动并具有相...
    99+
    2023-06-14
  • 宝塔如何设置内容301跳转
    宝塔设置内容301跳转的方法:进入宝塔面板控制后台,点击“网站”菜单栏。找到需要设置301重定向的网站,点击右侧“设置”。在网站设置中点击“重定向”功能。接着选择“访问域名”以及“目标URL”。最后勾选“启用301”保存设置并清除浏览器缓存...
    99+
    2022-10-09
  • css如何设置文本内容居中
    这篇文章主要介绍了css如何设置文本内容居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css设置文本内容居中的方法是,给文本元素添加text-align属性,并且将属性值...
    99+
    2023-06-15
  • 容器环境的JVM内存如何设置
    本文小编为大家详细介绍“容器环境的JVM内存如何设置”,内容详细,步骤清晰,细节处理妥当,希望这篇“容器环境的JVM内存如何设置”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。Java Heap基础知识默认情况下,...
    99+
    2023-06-29
  • html中img标签内如何直接设置宽度高度改变图片大小
    这篇文章主要介绍了html中img标签内如何直接设置宽度高度改变图片大小,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。<img&nbs...
    99+
    2022-10-19
  • wpf怎么设置控件内容
    在WPF中,可以使用以下方法设置控件的内容:1. 设置Text属性:对于一些文本相关的控件,如TextBlock、Label、But...
    99+
    2023-10-20
    wpf
  • javascript如何修改html内容
    本篇内容介绍了“javascript如何修改html内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • javascript如何替换div内容
    这篇文章主要讲解了“javascript如何替换div内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何替换div内容”吧! ...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作