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

jQuery attr与prop区别:DOM属性操作核心指南 在Web前端开发中,HTML元素属性与DOM属性是理解浏览器渲染机制的基础概念。attr方法操作的是HTML源码中的字符串属性,而prop方法访问的是JavaScript对象的实时状态属性,二者在类型、生命周期和语义上存在本质差异。掌握这一区分对解决表单状态同步、动态资源加载、无障碍支持等工程问题具有关键价值。尤其在维护jQuery遗留系统时,混淆attr与prop极易引发checked状态失效、src更新不刷新、class覆盖等典型故障。本文结合真实兼容性案例,系统解析属性操作的技术原理与最佳实践。 阅读详情

下面是一段测试代码:

<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")  显示的相对当前的文档所处的位置。

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


【信息科学与工程学】计算机科学与自动化——第一百三十四篇 编程语言篇 系列十三 PHP 01 本表格涵盖了PHP从内存管理(引用计数)、执行引擎(Zend VM/JIT)、核心数据结构(HashTable)、并发模型(Generator/Fiber)到工程实践(命名空间/类型系统)的关键底层机制。: PHP使用PCRE2库(Perl Compatible Regular Expressions),编译为正则表达式内部表示(字节码),通过pcre2_match()执行匹配。指向一个PHP脚本,该脚本在PHP-FPM启动时执行,将指定的类、函数等永久加载到OPcache共享内存中,且不会被清除。 阅读详情

相关推荐

用AI从0开始量化交易-制定学习计划安装学习环境

量化小白,利用AI从零开始学量化

weixin_52285994的博客 2113

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

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

好吗好的~的技术博客 5295

ArcMap 10.7/10.8启动加载界面后闪退?可能是这个隐藏的Normal.mxt模板文件在搞鬼

本文深入分析了ArcMap 10.7/10.8启动加载界面后闪退的问题,指出Normal.mxt模板文件损坏是常见原因。提供了从定位、删除模板文件到系统级修复的完整解决方案,帮助GIS工程师快速恢复工作流程。

weixin_28523493的博客 331

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

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

weixin_45673401的博客 4万+

LVGL core disp显示设计(lv_disp.c)

lv_disp.c当前显示页面的配置scr_act在原始的LVGL是以screen的概念存在,但我们还是习惯叫它为一个页面提供获取top_layer、sys_layer、prev_scr图层接口配置主题管理默认的主题管理是递归查找的,实际项目中因此页面的复杂性,虽然也兼容了此主题管理的方案,但还是推荐使用单页面自行管理主题的方案壁纸设置多页面切换的动画支持计算无用户操作时间清理显示缓存。

Bigan(安)的博客 2331

华为OD机试 - 最佳对手(Python/JS/C/C++ 2025 A卷 200分)

本专栏收录于《华为OD机试真题(Python/JS/C/C++)》。刷的越多,抽中的概率越大,私信哪吒,备注华为OD,加入华为OD刷题交流群,每一题都有详细的答题思路、详细的代码注释、3个测试用例、为什么这道题采用XX算法、XX算法的适用场景,发现新题目,随时更新。游戏里面,队伍通过匹配实力相近的对手进行对战。但是如果匹配的队伍实力相差太大,对于双方游戏体验都不会太好。给定n个队伍的实力值,对其进行两两实力匹配,两支队伍实例差距在允许的最大差距d内,则可以匹配。要求在匹配队伍最多的情况下,匹配出的各组实力差

学Java,找哪吒 1379

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

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

狮子座的男孩 1万+

基于Python的船舶AIS数据爬取与分析:从数据采集到可视化实战

本文详细介绍了如何使用Python构建一个完整的船舶AIS数据爬取与分析系统。文章从AIS系统的基本原理讲起,逐步深入到数据采集、存储、清洗、分析和可视化的全流程。我们将使用最新的Python技术栈,包括aiohttp异步爬虫、MongoDB存储、Pandas数据处理以及Pydeck三维可视化等。本文提供了完整的代码实现,并探讨了在实际应用中可能遇到的问题及其解决方案。关键词:AIS数据、Python爬虫、异步IO、数据可视化、海事分析。

2201_76125261的博客 811

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

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

FuDesign2008的专栏 7284

Plant Simulation 快速建模与布局(3)——自动生成的对象 代码“安全”删除管理

《PlantSimulation快速布局建模课程》教授利用SimTalk语言实现高效建模的技术要点,包括批量对象创建、阵列布局、属性管理及自动连接功能。重点讲解对象安全删除机制,通过existsObject检查对象存在性后使用deleteObject方法删除,避免程序报错。课程提供完整代码示例,展示如何通过循环结构实现矩阵布局对象的创建与安全删除,确保代码健壮性,显著提升建模效率。

qq_31964455的博客 119

【项目实战】TARA威胁分析和风险评估

TARA是信息安全领域中的一种风险评估方法,在汽车信息安全的上下文中,TARA分析特别重要,因为它可以帮助识别和管理与智能网联车辆相关的各种威胁,包括数据泄露、未经授权的访问、远程操控等。通过TARA分析,企业可以制定出针对性的安全目标、产品要求和产品安全声明,以确保汽车及其零部件符合相关的信息安全标准和法规。此外,TARA分析还可以与数字化建模系统结合,以更系统化和高效的方式进行风险评估和管理。

奶爸的编程之路,也就一周冷个三天 2711

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

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

suntao1995的博客 1万+

基于YOLOv10的微小目标检测,多头检测器提升小目标检测精度

引入多头检测器助力YOLOv10,暴力提升小目标检测性能

①答疑群聊服务;②YOLO大模型知识问答系统;③计算机视觉论文生成智能体; 2569

JavaScript对象与DOM操作实战指南

JavaScript对象是前端开发中的基础数据结构,采用键值对存储数据,支持动态属性访问。DOM(文档对象模型)则是浏览器将HTML文档解析为树状结构的编程接口,每个HTML元素对应一个DOM节点对象。理解对象与DOM的映射关系,能够高效实现动态页面渲染与交互。通过事件委托、文档片段等优化技术,可以显著提升DOM操作性能。在电商商品列表等典型应用场景中,结合JSON数据处理与DOM动态渲染,能够构建流畅的用户界面。本文以实战案例解析对象操作与DOM编程的最佳实践,涵盖虚拟DOM、MutationObserv

weixin_30460489的博客 382

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

深入理解DOM与BOM:从浏览器内核视角掌握前端核心模型

在Web前端开发中,文档对象模型(DOM)和浏览器对象模型(BOM)是连接JavaScript与浏览器环境的两大核心基石。DOM的本质是浏览器将HTML文档解析为内存中的树状对象模型,提供了操作页面内容、结构与样式的标准化接口,其事件流与委托机制是高效处理用户交互的关键。BOM则以window对象为核心,提供了控制浏览器窗口、导航、历史与会话等环境交互的能力,是构建单页应用(SPA)与实现复杂浏览器行为的基础。理解DOM与BOM的分工与协作原理,不仅能帮助开发者编写更高效、健壮的代码,更能从根本上解决页面性

weixin_34252090的博客 442

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

JavaScript面试核心:从基础到高级特性全解析

JavaScript作为前端开发的核心语言,其基础概念如作用域、闭包、原型链等是理解语言特性的关键。异步编程通过事件循环机制实现非阻塞操作,Promise和async/await解决了回调地狱问题。在工程实践中,性能优化涉及内存管理、防抖节流等技术,而模块化开发则推动了前端工程化进程。本文深入解析JavaScript面试中的高频考点,包括数据类型转换、原型继承、事件循环等核心机制,同时涵盖ES6+新特性和安全编码实践,帮助开发者系统掌握从基础到高级的JavaScript知识体系。

weixin_33912638的博客 440

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

JAVA-WEB

文章目录1. JAVA-WEB介绍2. HTML3. CSS样式4. JavaScript5. Vue.js6. xml解析7. Tomcat服务器8. http协议9. Servlet10. Thymeleaf11. Cookie与Session12. Ajax13. Filter14. 监听器15. WEB组件注解用法16. 事务控制 1. JAVA-WEB介绍 2. HTML 3. CSS样式 4. JavaScript 5. Vue.js 6. xml解析 7. Tomcat服务器 8. http协

weixin_58005665的博客 1060

JavaWeb学习

#前端部分(了解)课程思路、前端要素(Web了解、html、JS、vue、ajax、Element等)传统路线现在课程大纲路线## 前端要素(Web了解、html)HTML语法特点基本标签html标签(span)html标签(a)html标签(video)盒子模型:html标签(div)html标签(表格)html标签(表单)## 前端要素(JS)JS引入方式JS基础语法JS函数JS对象(基础(只关注Array、String、JSON)、BOM、DOM)JS事件监听## 前端要素(Vue)插值表达式Vue常

qq_2634545805的博客 430

前端进阶-CSS知识点总结

1、解决两个相邻元素的上下margin重叠问题;2、可以利用BFC解决高度塌陷问题;3、可以利用BFC实现多栏布局(两栏、三栏、双飞翼等)。

m0_56770663的博客 381

谈谈getAttribute来获取节点的src值

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

Focus-Fe 1142

js中的getAttribute()

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

优雅的博客 2万+

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

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

weixin_34405332的博客 456

element中el-image怎样显示图片

代码如下: <el-image style="width:100%;" :src="require('../../../../assets/images/businessLicense.png')"> </el-image> 区别于普通的<img />标签 <img style="width:100%;" src="../../../../assets/images/busin...

mingY的博客 1337

Vue elementUI 中 img标签的src属性动态绑定值

场景描述:在用户的头像显示上,如果用户没有设置头像,使用系统默认的头像,如果设置了头像,则显示用户设置了的 代码示例: <img :src="userInfo.avatar === '' ? require('@/images/avatar.png') : require(userInfo.avatar) "> ...

HKkkkkSky的博客 1811

[python爬虫] 爬取图片无法打开或已损坏的简单探讨

本文主要针对python使用urlretrieve或urlopen下载百度、搜狗、googto(谷歌镜像)等图片时,出现"无法打开图片或已损坏"的问题,作者对它进行简单的探讨。同时,作者将进一步帮你巩固selenium自动化操作和urllib库等知识。 感谢朋友"露为霜"的帮助!希望以后能实现强大的图片爬虫代码~ 一. ...

weixin_34346099的博客 3500

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

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

weixin_39963465的博客 7280
上一篇: javascript:; 和 javascript:void(0); 的区别是什么?
下一篇: 自己写的鼠标单击按钮实现图片切换
ios0213
博客等级 码龄15年 5粉丝 110原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值