首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js和jQuery获取img标签的src属性获取不到的解决方法

很多朋友可能遇到过,用 jQuery 获取 img 标签的 src 属性却获取不到的问题: img id="test" src="1.jpg" alt="test" /> 使用如下的语句都会出错:...alert($('#test')); alert($('#test').src); 使用 $('#test').src 语句不会出错,但获取不到 img 的地址。...$('#test'));  //[object Object] alert($('#test').src);  //undefined  最后,使用 $('#test')[0].src 才能够获取到 img...拓展: JS获取 img 的 src 值: //方法一: var path =  $('#test').attr('src'); //方法二: var path = document.getElementById...("test").src; //方法三: var path = $("#test")[0].src; 声明:本文由w3h5原创,转载请注明出处:《js和jQuery获取img标签的src属性获取不到的解决方法

18.9K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用ueditor富文本编辑器导出文本内容时,自定义各个标签的属性,以img标签添加最大宽度为例(vue框架)….

    做显示这块的是公司做android和ios的同事,他们拿到的值富文本直接导出的json格式的html代码,因此他们很难再对代码进行二次处理,解决问题的源头又回到了我这里~~ 言归正传,想要解决问题就要从标签的...style属性着手;本人在追踪数据流的时候发现了在导出编辑器内容的时候会把编辑器内容全部遍历一次的地方,遍历的数组大概就长这样(这其实是遍历之后的,理解我的意思就行) 那么重点来了,以img标签为例...,在 var attrs = node.attrs;下面加上一段代码 if(node.tagName==='img'){ attrs.style?...:attrs.style+='max-width:100%;':attrs.style='max-width:100%;' } 粘完应该是这样的: 说明:首先判断是否是img标签,然后判断是否有style...最后提醒一句,引入的时候要引入ueditor.all.js,别引ueditor.all.min.js了,这改的不是min.js~~~ 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

    2.2K30

    如何在项目优雅使用webp

    picture 使用picture标签,这个是html5新加的标签,浏览器支持情况,可以见caniuse 下面是具体的引用,picture标签下有一个source,眼熟的可能想到了video标签下也有一个...source标签, source的srcset用来标注图片链接,type为图片类型(浏览器根据type类型判断支不支持此类型,从而决定是否加载), 从第1个source开始判断,img元素兜底。...故这种方式适合img样式结构简单的地方。同时由于不支持picture,故source里的2x/3x,响应式也就用不了,只是简单的src fallback。...750.webp" type="image/webp"> img src="teal.png" /> 复制代码 在浏览器运行时判断是否支持,再用JS去替换图片格式 /** * 检测...= dataUri })) } 复制代码 引入JS polyfill脚本picturefill来支持picture原生功能,包括上面提到的响应式支持(media/2x/3x等) <picture

    1.1K20

    前端面试知识点

    还有中央事件总线 emit on 什么是mvc mvp mvvm M 为数据层,V 视图层,C 逻辑层。...解决:/*方式一*/ div {font-size: 0;} /*方式二*/ img{display: block;} /*方式三*/ img{vertical-align: top;} 3、几个img...标签放在一起的时候,有些浏览器会有默认的间距 解决:使用float属性为img布局 4、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。...引入html5shiv.js文件 5、针对IE属性 css hack 6、-ms- -o- -webkit- -moz- 7、清除浮动 clearfix 8、边距重叠 解决:加一个父元素,父元素使用...angular中的模板式表单和响应式表单 如何做表单验证 angular-cli的使用方式 如何创建组件 创建服务 创建类 创建管道 网格系统 如何同bootstrap实现响应式布局 col-lg-6

    1.6K10

    android webview加载html图片自适应手机屏幕大小&点击查看大图

    在代码中添加img标签替换函数 /** * 将html文本内容中包含img标签的图片,宽度变为屏幕宽度,高度根据宽度比例自适应 **/ public static String...方法三:使用js脚本,重置img标签中图片的宽度和高度 此方法需要使用js,固webview设置属性中一定要添加下面这句 webSettings.setJavaScriptEnabled(true);/...标签的图片大小 // html加载完成之后,添加监听图片的点击js函数 addImageClickListner(); } @Override...点击详情图片查看大图 (1)注入js脚本,设置图片点击函数openImage private void addImageClickListner() { // 这段js函数的功能就是,遍历所有的...函数的功能就是,遍历所有的img节点,并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去        bindingView.contentWv.loadUrl

    6.4K10

    01 . 前端之HTML

    JavaScript JS JavaScript简称JS,是一种动态的弱类型脚本解释性语言,和HTML、CSS并称为三大WEB核心技术,得到了几乎所有主流浏览器支持. 1994年,网景Netscape...众多平台都在思考是否能够以一套架构,解决所有前端问题,使用的技术还是最通用的网页+JS....主动闭合标签 # (主动闭合标签都是成对出现的,并且后面的必须加反斜线/.以表名此标签内容结束) 从元素(标签)在页面所占据的位置空间来分,可分为 # 1....-- title为鼠标停留在哪里一段时间的文本信息,alt为找不到图片显示的信息d --> list标签 响应式布局 响应式布局介绍 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本,这个概念是为解决移动互联网浏览而诞生的.

    1.6K50

    xss-demo靶场的全流程详解

    0x07: 这一题的过滤中,两个尖括号中的所有内容会被清空,前端中有一个规则,就是单标签不需要闭合。我们可以使用img标签。...img src=x onerror="alert(555)" 0x08: 这一题正常我们需要闭合标签,但是过滤语句中将这个标签给过滤掉了,所以我们还是利用前端的一个换行可执行特性。...http://www.segmentfault.com">img src=x onerror="alert(1) 0x0A: 这一题往后三题的解法都是外部加载js弹窗的方式 这里直接复制结果出来...所以我们这里使用')将前面的括号闭合,然后用分号结束这个标签,因为这个是img单标签,后面可以不用闭合,所以我们直接用//将后面的内容注释掉。...注:这里如果你的值不是数字123,是字符串就需要加上双引号 0x11: 这一题会将我们所有输入的/,换行等使用符号给过滤替换,但是没有过滤双引号,所以我这里还是使用双引号加括号闭合,使用分号结束上一个语句最后使用括号加双引号闭合

    88220

    《Web性能实战》读书笔记

    优化CSS 移动优先 移动优先响应式设计:默认样式为移动设备定义,并且随着屏幕宽度的增大而增加复杂性。 桌面优先响应式设计:默认样式为桌面设备定义,并且随着屏幕宽度的减小而降低复杂性。...像素宽度的时候图片是img/amp-large.jpg,可见后面的w指的是屏幕宽度为多少。...> picture很好用,如果不支持的时候可以走img标签做兜底处理,如果在低版本浏览器也希望使用picture标签该怎么办,就得靠picturefill了,使用方式如下。...要求浏览器每次访问页面时下载所有受影响的资源。...请求按接收顺序响应,在初始批处理中的所有请求完成之前,无法开始新的请求。如总共有9个任务,第一批会一次性加载6个,得等这6个中最慢的加载完后才会加载下一批的剩余3个请求。

    26110

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券