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中删除了 ...
随机推荐
- MySQL slow_log表不能修改成innodb引擎
背景 从mysql.slow_log 获取慢查询日志很慢,该表是csv表,没有索引. 想添加索引来加速访问,而csv引擎不能添加索引(csv引擎存储是以逗号分割的文本来存储的),只能改存储引擎来添加索 ...
- Go语言标准库之time
Go语言标准库之time 时间的格式化和解析 格式化 Format Go语言和其他语言的时间格式化的方式不同,Go语言格式化的方式更直观,其他的语言一般是yyyy-mm-dd package main ...
- Servlet-获取页面的元素的值的方式以及区别
request.getParameter() 返回客户端的请求参数的值:request.getParameterNames() 返回所有可用属性名的枚举: request.getParameterVa ...
- glide使用
glide在github地址:https://github.com/bumptech/glide 1.添加依赖(最好看官网,因为有时候添加依赖的会有轻微改动,版本也会一直更新) repositorie ...
- 从零开始学 Web 之 移动Web(九)微金所案例
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- Everything(一款用于检索硬盘文件的工具)
有时候文件夹一多,找不到文件,忘记放哪个盘符怎么办? Everything就能帮你解决,比电脑自带的快多啦,官网在此:http://www.voidtools.com/ (也不大,就几M,没有特别的安 ...
- Canvas画空心正五角星-扩展DEMO为五星红旗
马上就要国庆了,在这个举国欢庆的日子里面,让我来画一个五角星表表我的爱国之情,啊?那你不是要画一个五星红旗?是的,你猜对了,其实我的最初想法只是画一个空心的正五角星,为了满足你,我拼一拼.在这个过程中 ...
- 【NET CORE微服务一条龙应用】应用部署
简介 系列目录:[NET CORE微服务一条龙应用]开始篇与目录 本章主要介绍https://github.com/q315523275/FamilyBucket上微服务一条龙应用,在实际使用中的应用 ...
- Linux进程间通信(System V) --- 消息队列
消息队列 IPC 原理 消息队列是消息的链式队列,如下图为消息队列的模型.整个消息队列有两种类型的数据结构. 1.msqid_ds 消息队列数据结构:描述整个消息队列的属性,主要包括整个消息队列的权限 ...