1. html部分

<div class="bg-color-two" id="bg_color_two" onclick="setBg(this)"></div>
<div class="bg-color-three" id="bg_color_three" onclick="setBg(this)"></div>

2. css部分

.bg-color-two {
width: 40px;
height:40px;
background-image:url(811915c596d17e09d4f85bd7e80ccee7.jpg);
background-size:40px 40px;
}
.bg-color-three {
width: 40px;
height:40px;
background- image:url(675aa3366a8cda46febf0053c82e4f27.jpeg);
background-size:40px 40px;
}

3. js部分

function setBg(control) {
//google用getComputedStyle(object, attr)方法获取style属性
var bgImage = getComputedStyle(document.getElementById(control.id), "style").backgroundImage;
console.log(bgImage); //bgImage = "url(file:///C:/Users/Gladys/Desktop/811915c596d17e09d4f85bd7e80ccee7.jpg) }

注意:fire和google chrome都可以用getComputedStyle(object, attr)方法获取style属性,而IE浏览器用getStyle(object, attr)获取style里面的属性

在js中获取在css中设置的background-image值的更多相关文章

  1. 使用JS准确获取URL网址中参数的几种方法

    记录下使用JS准确获取URL网址中参数的方法: 参考链接1. https://blog.csdn.net/Zhihua_W/article/details/54845945?utm_source=bl ...

  2. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  3. 在swt中获取jar包中的文件 uri is not hierarchical

    uri is not hierarchical 学习了:http://blog.csdn.net/zdsdiablo/article/details/1519719 在swt中获取jar包中的文件: ...

  4. 【记录】mybatis中获取常量类中数据

    部分转载,已注明来源: 1.mybatis中获取常量类中数据 <update id="refuseDebt"> UPDATE dt_debt a SET         ...

  5. js函数实现转换css中常用的颜色编码

    //转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...

  6. iOS中获取系统相册中的图片

    一.获取单张图片 思路: 1.利用UIImagePickerController可以从系统自带的App(照片\相机)中获得图片 2.设置代理,遵守代理协议 注意这个UIImagePickerContr ...

  7. 【poi】用POI新建一个xlsx文件【或者说将数据存入到xlsx中】/【将数据从xlsx中获取到项目中】

    第一部分:写入xlsx中 使用POI创建一个xlsx文件: 项目结构如下: 具体使用的POI中的 XSSFWorkbook   xlsx对象 Sheet 工作簿对象 Row 行对象 Cell  单元格 ...

  8. 子PID namespace中获取父namespace中pid的方法

    在那篇< 使用独立PID namespace防止误杀进程>中的最后,我碰到了一个难题,那就是父PID namespace中的进程无法使用进入子PID namespace中通过echo $$ ...

  9. struts2 在 Action 或 Interceptor 中获取 web.xml 中配置的 <context-param> 参数 (这是我的第一篇博文,哈哈。)

    最近为了改一个问题,想加一个控制开关,就在web.xml 中配置了一个 <context-param> 参数,并在 Action 或 Interceptor 中获取参数值. 1.在 web ...

随机推荐

  1. 关于pc端直播

    写这篇文章首先是想给自己一个总结.整理,还有就是给那些 没有特别明白直播是怎么回事的人一点 思路 最近公司想要做pc端直播,作为一个自认为很菜的前端实在是不知从何下手,所以只能用国人最爱的百度,搜索了 ...

  2. js-权威指南学习笔记2

    第三章 类型.值和变量 1.JS的数据类型分为两类:原始类型(基本数据类型/不可变类型)和对象类型(引用数据类型/可变类型). JS中的原始类型包括数字/字符串/布尔值,还有两个特殊的:null和un ...

  3. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  4. Leetcode 60. Permutation Sequence

    The set [1,2,3,-,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  5. CodeForces - 274B Zero Tree

    http://codeforces.com/problemset/problem/274/B 题目大意: 给定你一颗树,每个点上有权值. 现在你每次取出这颗树的一颗子树(即点集和边集均是原图的子集的连 ...

  6. 企业站SEO记录

    半个多月前给接了一个企业站,赚点小钱,客户也没什么要求,所以就找了模板修改了一下就上线了,然后又做了微信网站.搭了微信公众号,也都没什么技术含量,最伤脑筋的就是做关键词排名了,虽然做的几个词竞争也不是 ...

  7. 放弃火狐,选择chrome

    最近公司笔记本电脑经常卡的不行(win10系统),先是硬盘经常占用99%-100%,改系统设置,软件优化,硬件测试...尝试了能搜索到所有办法后,还是没有解决,换成win7后感觉稍微好点了(心理作用? ...

  8. Apache的dbutils的架构图

  9. EmployeeTest

    package fourthf; public class EmployeeTest { public static void main(String[] args) { // TODO Auto-g ...

  10. Java学习笔记14---使用标志位控制循环

    使用标志位控制循环 前面提到了控制循环的常用技术:计数器控制的循环.另一种控制循环的常用技术是在读取和处理一个集合的值时指派一个特殊值.这个特殊的输入值也成为标志值(sentinel value),用 ...