获取一个图片的地址(该图片的路径是写在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的值--移动端【踩坑】的更多相关文章

  1. js原生_获取url键值对

    思路: 1.先对url进行处理,获取 ?后的字符串 postid=10457794&actiontip=保存修改成功') 2. 字符串通过&标识,不同参数转为数组 ["pos ...

  2. 获取SpringCloud gateway响应的response的值,记录踩坑

    最近在做网关改造,想要通过Gateway过滤器获取ResponseBody的值,查看了网上的帖子和官网内容: 帖子:https://cloud.tencent.com/developer/articl ...

  3. background属性总结,background-image路径问题相对于css和js

    (1)background属性总结 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color规定要使用的背景颜色.background-pos ...

  4. js中对style中的多个属性进行设值

    js中对style中的多个属性进行设值: 看一下案例自然就明白: document.getElementById("my_wz1").style.cssText="bac ...

  5. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  6. [置顶] js中如何复制一个对象,如何获取所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? var obj= ...

  7. JS基础_属性名和属性值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js遍历对象所有的属性名称和值

    /* * 用来遍历指定对象所有的属性名称和值 * obj 需要遍历的对象 * author: Jet Mah * website: http://www.javatang.com/archives/2 ...

  9. js操作对象属性值为字符串

    今天在项目开发中遇到一个没遇到过的问题,这个问题是需要对比两个对象a和b,a是一个只有一个属性的对象,b是一个含有多个属性对象,如果b中包含和a一模一样的属性名和值,则把这个一样的属性和值从b中删除了 ...

随机推荐

  1. 哥们,你真以为你会做这道JVM面试题?

    有关Java虚拟机类加载机制相关的文章一搜一大把,笔者这里也不必再赘述一遍了. 笔者这里捞出一道code题要各位大佬来把玩把玩,如果你一眼就看出了端倪,那么恭喜你,你可以下山了: public cla ...

  2. ubuntu环境下编译linux内核问题解决备忘

    在使用比较新的gcc编译内核时,经常遇到这个问题: 问题一: 提示: mkimage" command not found - U-Boot images will not be built ...

  3. tomcat-四种运行模式和三种部署模式(优化)

    四中运行模式如下: 1-bio: 传统的Java I/O操作,同步且阻塞IO. 2-nio: JDK1.4开始支持,同步阻塞或同步非阻塞IO 3-aio(nio.2): JDK7开始支持,异步非阻塞I ...

  4. [提权]MS16-016提权EXP

    MS16-016提权EXP[K8]Tested On Win7 x86Usage: ms16-016_win7.exe "whoami"by K8拉登哥哥 20160216 下载: ...

  5. [EXP]K8 DotNetNuke DNNspot Store <=3.0 GetShell exploit

    # Exploit Title: DotNetNuke DNNspot Store <=3.0 GetShell exploit# Date: 31/03/2015# Author: K8拉登哥 ...

  6. list源码1(参考STL源码--侯捷):list节点、迭代器、数据结构

    list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...

  7. 第四章:Android架构

    我们对android有了个大致的了解,知道如何搭建android的环境及简单地写一个HelloWorld程序,而且知道一个android项目包括哪些文件夹和文件及相应的作用.本篇将站在顶级的高度——架 ...

  8. Spring Boot初识(3)- Spring Boot整合Swagger

    一.本文介绍 如果Web项目是完全前后端分离的话(我认为现在完全前后端分离已经是趋势了)一般前端和后端交互都是通过接口的,对接口入参和出参描述的文档就是Mock文档.随着接口数量的增多和参数的个数增加 ...

  9. easyui combobox下拉列表的多选值

    html: <input id="cc" class="easyui-combobox" value="" data-options= ...

  10. WebService与RMI(远程调用方式实现系统间通信)

    前言 本文是<分布式java应用基础与实践>读书笔记:另外参考了此博客,感觉讲的挺好的,尤其是其中如下内容: 另外,消息方式实现系统间通信本文不涉及.RMI则只采用spring RMI框架 ...