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

最新推荐文章于 2022-04-29 12:05:18 发布

原创最新推荐文章于 2022-04-29 12:05:18 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用JavaScript来获取HTML中图片元素路径的方法，并区分了绝对路径与相对路径的不同应用场景。

下面是一段测试代码：

<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

分享到新浪微博

扫一扫
举报

举报

专栏目录

谈谈getAttribute来获取节点的src值

Focus-Fe

10-10

1124

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

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

FuDesign2008的专栏

05-31

7225

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

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

IHTMLElement.getAttribute 出现参数无效的解决方法

正己的专栏

03-31

3672

调用 IHTMLElement.getAttribute('href') 时，如果被调用的链接是错误的链接，比如 abc，也就是说href后面是个错误的url时，会出现“无效参数”错误对对话框。改进方法 IHTMLElement.getAttribute('href', 2)，也就是增加一个参数，参数说明如下 0： Default. Performs a property search th

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

好吗好的~的技术博客

12-29

5170

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

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

最新发布

08-21

- 遍历这些img元素，通过img.src或img.getAttribute('src')获取src属性注意：如果.box元素内部有多个img，那么querySelectorAll('.box img')会获取到所有符合条件的img。如果只想获取直接子元素的img，可以使用...

js获取img的src值

04-30

比如，src属性可能被JavaScript修改过，这时候用element.src会得到当前的值，而getAttribute('src')得到的是HTML中写的原始值。这点需要解释清楚，避免混淆。根据引用中的信息，比如引用[1]提到jQuery中attr和prop...

Java 爬虫页面iframe内部 img src

03-11

嗯，用户的问题是关于如何用Java爬虫抓取页面中iframe内的图片链接，也就是img标签的src属性。首先，我需要回忆一下爬虫处理iframe的一般方法。记得之前看过引用中提到，使用Selenium或者执行JavaScript来获取iframe...

js获取鼠标悬停位置的img的src

04-30

需要注意的是，有些情况下src属性可能是相对路径，可能需要转换为绝对路径，可以使用element.src来获取解析后的URL。另外，还要考虑性能问题。如果页面中有大量图片，为每个单独添加事件监听可能会影响性能。这...

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

狮子座的男孩

04-29

1万+

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

getAttribute() 获取某个元素行间的样式

weixin_34405332的博客

05-22

435

elem.getAttribute('key') 获取某个元素行间的样式，js设置的样式无法获取，比如 <div id='div1' index='1'></div> var oDiv=document.getElementById('div1'); oDiv.index=2; alert(oDiv.getAttribute('index')); ...

js中的getAttribute()

优雅的博客

09-04

2万+

getAttribute()是HTML DOM的一个方法，用以获取HTML元素的属性（如id，name，type以及其他自定义属性）。style是HTML DOM的一个关于样式的对象，style对象的属性（如background，color，border等等）用以设置元素的样式。

html如何自动切图图片轮换播放,JS对img进行操作(换图片/切图/轮换/停止)

weixin_29828857的博客

06-03

312

var i = 1; var n;function showImg() {if (document.getElementById('img').getAttribute("src") == "images/1.jpg") {document.getElementById('img').setAttribute("src","images/2.jpg");}else {document.getEle...

html中绝对路径的应用,如何把html中的相对路径变成绝对路径_c#应用

weixin_31864641的博客

06-17

288

private static string ConvertToAbsoluteUrls (string html, Uri relativeLocation) {IHTMLDocument2 doc = new HTMLDocumentClass ();doc.write (new object [] { html });doc.close ();foreach (IHTMLAnchorEleme...

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

weixin_39963465的博客

06-04

7200

在开发网站过程中，事先就设置好了图片img的src性，一般来说很少修改这个属性，网站加载时直接显示事先设置好的图片。但如果网页要求实现滚屏加载图片(动态加载图片)，也就是一次不显示网页内的所有图片，当滚动屏幕时再显示进入屏幕区的图片。这样不但可以减少对服务器的请求次数，而且能大大节省服务器的流量。滚屏加载图片事先把网页内要动态显示图片的所有src属性设置为一张小图，待要显示目标图片时再把src属性...

JS对img进行操作

shang_111111的专栏

04-16

2411

var i = 1; var n; function showImg() { if (document.getElementById('img').getAttribute("src") == "images/1.jpg") { document.getElementById('img').setAttribute("s

selenium+python 爬取网络图片(2) -- 百度

Sean.W的专栏

01-30

2万+

上一篇博文《selenium+python 爬取网络图片(1) -- soso、谷歌、好搜》介绍了如何用selenium+python在诸如soso、谷歌、好搜等搜索引擎上爬取图片的方法，但是却没用提到百度，因为百度的情况比较特殊。首先，百度图片的数据更好，因为每幅图片都有“data-desc”描述可以作为图像很好的语义标签，此外基于百度较强的技术其查询搜索得到的图片相关性较高，后续人工筛选工作较少；其次，百度图片的数据不容易爬取，如果像前一篇文章中的方法取img标签的src值作为下载url，是下载不到图片

有关getAttribute()方法和setAttribute()方法的说明

helanye的专栏

07-21

3万+

js getAttribute()方法●一份文档就是一棵节点树。 ●节点分为不同的类型：元素节点、属性节点和文本节点等。 ●getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。 ●getElementsByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。 ●这些节点中的每个都是一个对象。