img src属性 DOM编程下 img.src与element.getAttribute("src")的区别

最新推荐文章于 2024-07-16 08:14:07 发布

ios0213

最新推荐文章于 2024-07-16 08:14:07 发布

阅读量3.2k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ios0213/article/details/51832684

版权

JavaScript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

下面是一段测试代码：

<body>
<img id="demo" src="a1.jpg" />
<script>
var img=document.getElementById("demo");
alert(img.src);
alert(img.getAttribute("src"));
</script>
</body>

我们将文件保存在F盘下，然后运行，可以看到：

img.src 显示是图片的完整路径，即在哪个文件夹下以及命名。

img.getAttribute("src") 显示的相对当前的文档所处的位置。

因此在以后编程中需要多加注意这一点。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ios0213

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料

04-23

1. 获取属性：`element.getAttribute(name)`，例如，获取img元素的src属性。 2. 设置属性：`element.setAttribute(name, value)`，例如，设置img元素的src属性。 3. 删除属性：`element.removeAttribute(name)`，...

DOM实现获取img标签src属性的绝对位置和相对位置

好吗好的~的技术博客

12-29

4961

获取相对路径显示图片的相对当前的文档所处的位置。 document.getElementById(obj).getAttribute('src') 获取绝对路径显示是图片的完整路径，即在服务器的哪个文件夹下和文件命名。 document.getElementById(obj).src ...

参与评论您还未登录，请先登录后发表或查看评论

javascript获取、设置修改img的src属性（get/setAttribute）

最新发布

xiejunlan的博客

07-16

598

在 Vue 2 中，Element UI 并没有一个专门命名为el-image的图片组件作为标准组件库的一部分。然而，Element UI 官方文档中提到了如何使用 Vue 指令（如v-bind:src）和 Vue 的基础功能来展示图片，这意味着你通常会使用原生的标签结合 Vue 的特性来管理图片。不过，在 Element Plus（Element UI 的 Vue 3 版本）中，确实有一个名为ElImage的图片组件，它提供了更多的功能和灵活性。

vue3 element plus 中el-image本地图片加载失败，路径问题

qq_43378240的博客

09-12

2163

src那里要用require包起来，这样就行了。

setAttribute() 与 getAttribute() 用法剖析及选项卡操作的实例展示，这一篇就够了

狮子座的男孩

04-29

9488

Ⅰ、在 MDN 上 setAttribute() 与 getAttribute() 函数的用法解释(很详细)： 1、Element.setAttribute()：其一、摘要：设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。要获取某个属性当前的值，可使用 getAttribute()；要删除某个属性，可使用 removeAttribute()。其二、语法： element.setAttribute(name, value); 参数： name

image元素的src属性值与getAttribute('src')值

FuDesign2008的专栏

05-31

7027

给image元素赋予未编码的路径，会发生很有意思的情况，执行如下js代码 var img = new Image(); img.onload = function () { var src = img.src, attrSrc = img.getAttribute('src'),

web前端开发知识点总结.docx编程资料

04-06

- 获取属性（`getAttribute()`） **3.3 事件处理** - **事件类型** - 鼠标事件（`click`, `mouseover`, `mouseout`） - 键盘事件（`keydown`, `keyup`） - 页面事件（`load`, `unload`） - **绑定事件** - ...

用js获取元素属性的代码

12-01

- `element.src` 直接获取或设置如<img>、等标签的src属性值。 - `element.href` 直接获取或设置、等标签的href属性值。通过上述方法，可以灵活地获取和操作HTML元素的属性，从而让网页的内容和样式动态变化，增强...

DOM基础教程之模型中的模型节点

12-09

属性节点表示HTML元素的属性，如`<a>`标签的`href`属性或`<img>`标签的`src`属性。每个元素节点都可以有多个属性节点，而每个属性节点包含一对键值，键是属性名，值是属性值。在JavaScript中，我们可以通过元素节点...

python 通过selenium 定位图片后获取src属性

suntao1995的博客

07-27

1万+

https://python-selenium-zh.readthedocs.io/zh_CN/latest/4.%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D/

get-img-src:从HTML获取图像src属性网址

05-01

get-img-src 从HTML获取图像src属性/ URL。安装 npm install --save get-img-src 用法 var getImgSrc = require ( 'get-img-src' ) getImgSrc ( '< ></> < ></>' , function ( err , imgSrcs ) { console . log ( imgSrcs ) } ) // => ['some-img.png', 'some-other-img.jpg'] getImgSrc ( '<span>HTML without an image</span>' , function ( err , imgSrcs ) { console . log (

selenium下载或保存图片最好的方法

五十风的专栏

01-25

5686

selenium爬取页面时经常遇到要保存图片的需求，通常的做法是获取链接后用requests下载，但这种方法脱离了selenium环境，如遇到有校验的情况还需要绕过校验。下面介绍两种直接通过selenium保存图片的方法：

2021年8月12日学习笔记

Nikolala123的博客

08-12

241

1.DOM 事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、Ac

python爬图一篇过（一）【超·详细】：selenium库：webdriver环境配置+新手基础知识

qq_53021454的博客

09-29

2025

前言：一个月前，博主在学过python（一年前）、会一点网络（能按F12）的情况下，凭着一腔编程改变世界的热血和对把电脑变成工具人的兴趣，开始了python爬虫的学习。一路过来可以说走了相当多弯路，但是前不久终于成功！！！（泪目）所以今天萌新我第一次斗胆在CSDN上开一个栏目，分享我的python图片爬虫全实现过程，内心真的激动！！！希望过路大神能多多指教和鼓励，写得不对的地方请直接指出！老规矩上第一章的思维导图所谓之所以要基于selenium库爬虫，是因为现在网...

Element link doesn't have required attribute property

weixin_34125592的博客

05-04

1833

前端标准http://validator.w3.org/ 拒绝你的代码时报 Element link doesn't have required attribute property 把样式链接 <link ... 移到 <body>里，会报上面提醒要想不报，把<link 还放到 <head> 里当然非要放到 <body>里，加 pro...

谈谈getAttribute来获取节点的src值

Focus-Fe

10-10

1067

此代码片段来源与seajs 首先关于hasAttribute,我们都知道，IE6-7不支持下面分支里面的: node.getAttribute('src',4); 在源码的这个http://msdn.microsoft.com/zh-cn/subscriptions/ms536429.aspx里面大家可以看到有一个这样的评论。很多的朋友可...

DOM：常用元素的属性操作（src、href、title......）

weixin_46682277的博客

03-16

397

修改图片中的src和title属性，示例： <button id="btn1">喻言美图1</button> <button id="btn2">喻言美图2</button><br> <img src="img/1.jpg" alt="" title="喻言美图1"> <script> var btn1 = document.getElementById("btn1"); var btn2 = docum

遍历div下的img，并获取img的src

04-26

您可以使用JavaScript中的以下代码来实现： ``` var div = document.getElementsByTagName("div")[0];...接着通过for循环遍历所有的img元素，使用getAttribute()方法获取img元素的src属性值，最后将其打印出来。