js取得background属性url的值--移动端【踩坑】
获取一个图片的地址(该图片的路径是写在css的background-img属性中的),一般实现方式:
var topimg = $(".topbg").css("backgroundImage");
alert(topimg);
获取的是包含url(“xxx.jpg”)形式的值,获取url内的值,实现方式如下:
var topimg = $(".topbg").css("backgroundImage");
topimg = topimg.split('(')[1].split(')')[0];
alert(topimg);
在这里一般的安卓手机和ios手机都是无法实现的,alert的内容是包含双引号的图片地址,不是纯图片地址,于是还需要去掉双引号:
var topimg = $(".topbg").css("backgroundImage");
topimg = topimg.split('("')[1].split('")')[0];
alert(topimg)
在这里就可以获取到background-image的图片地址了。
但是,这里有一个坑。。
在iphoneX上依然无法获取到background-image的图片地址,经过不断的断点调试,发现,
在iphoneX上的background-image的值是不包含双引号的:url(image.png);而在其他手机上background-image的值是包含双引号的:url("image.png"),
于是将代码做出如下调整即可实现:
var topimg = $(".topbg").css("backgroundImage");
topimg = topimg.split('(')[1].split(')')[0];
if(topimg.indexOf('"') > -1){
topimg = topimg.split('"')[1].split('"')[0];
}
转载时请注明出处及相应链接,本文永久地址:https://www.cnblogs.com/wangxiaoling/p/9958936.html,文章标题备注转载,如:xxx【转载】,谢谢!
js取得background属性url的值--移动端【踩坑】的更多相关文章
- js原生_获取url键值对
思路: 1.先对url进行处理,获取 ?后的字符串 postid=10457794&actiontip=保存修改成功') 2. 字符串通过&标识,不同参数转为数组 ["pos ...
- 获取SpringCloud gateway响应的response的值,记录踩坑
最近在做网关改造,想要通过Gateway过滤器获取ResponseBody的值,查看了网上的帖子和官网内容: 帖子:https://cloud.tencent.com/developer/articl ...
- background属性总结,background-image路径问题相对于css和js
(1)background属性总结 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color规定要使用的背景颜色.background-pos ...
- js中对style中的多个属性进行设值
js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值
在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...
- JS基础_属性名和属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js遍历对象所有的属性名称和值
/* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah * website: http://www.javatang.com/archives/2 ...
- js操作对象属性值为字符串
今天在项目开发中遇到一个没遇到过的问题,这个问题是需要对比两个对象a和b,a是一个只有一个属性的对象,b是一个含有多个属性对象,如果b中包含和a一模一样的属性名和值,则把这个一样的属性和值从b中删除了 ...
随机推荐
- IntelliJ Idea 授权服务器使用
JetBrains授权服务器 1 http://intellij.mandroid.cn/ 支持的版本 IntelliJ IDEA 7.0 或更高ReSharper 3.1 或更高ReSharper ...
- Spring中新建记录后返回自增主键的处理方法
接手一个旧系统改造的过程,要插入后立即返回自增值,不能重构guid类型主键,Spring提供了很优美的机制. Spring利用GeneratedKeyHolder,提供了一个可以返回新增记录对应主键值 ...
- 【2019北京集训测试赛(七)】 操作 分治+FFT+生成函数
题目大意:你有$n$个操作和一个初始为$0$的变量$x$. 第$i$个操作为:以$P_i$的概率给$x$加上$A_i$,剩下$1-P_i$的概率给$x$乘上$B_i$. 你袭击生成了一个长度为$n$的 ...
- 关于小窗滑动,父级body也跟随滑动的解决方案(2)
当第一次写这个问题的时候,并不知道竟然还会写2,而且(1)也并没有解决问题. 也发现,这个问题,真实也困住了很多人,找到了张鑫旭(http://www.zhangxinxu.com/wordpress ...
- 在向一个ArrayList中添加大量元素前,可以使用ensureCapacity方法来增加ArrayList的容量
参考http://www.jianshu.com/p/f174d49b391c ensureCapacity(),该方法就是 ArrayList 的扩容方法.在前面就提过 ArrayList 每次新增 ...
- Linux_CentOS-服务器搭建 <七>
设置Linux下Mysql表名不区分大小写 对linux安装mysql不熟悉的(查看我那一系列的文章第一篇): http://www.cnblogs.com/Alandre/p/3365535.htm ...
- Facelets应用程序的生命周期
当客户端(如浏览器)向使用Facelets创建的页面发出新的请求时,会创建一个新的组件树或 javax.faces.component.UIViewRoot将其创建并放入FacesContext. 该 ...
- 开源网站流量统计系统Piwik源码分析——参数统计(一)
Piwik现已改名为Matomo,这是一套国外著名的开源网站统计系统,类似于百度统计.Google Analytics等系统.最大的区别就是可以看到其中的源码,这正合我意.因为我一直对统计的系统很好奇 ...
- 自定义Fiddler插件一
上个月自定义了一个Fiddler的插件,可以根据请求生成接口自动化测试的RF和Python代码,这样测试人员只需要手动操作页面用Fiddler抓取报文,就可以直接生成RF.Python代码,然后只需要 ...
- spring cloud config与eureka配合使用
前面两篇介绍了Spring Cloud Config服务端和客户端的简单配置,本篇介绍Spring Cloud Config与Eureka配合使用 前言 默认情况下,配置客户端启动时,都是通过配置属性 ...