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. BZOJ 2424: [HAOI2010]订货

    2424: [HAOI2010]订货 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 915  Solved: 639[Submit][Status][ ...

  2. BZOJ 4390: [Usaco2015 dec]Max Flow

    4390: [Usaco2015 dec]Max Flow Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 177  Solved: 113[Submi ...

  3. PHP build notes - WARNING: This bison version is not supported for regeneration of the Zend/PHP parsers (found: 3.0, min: 204, excluded: 3.0).

     WARNING: This bison version is not supported for regeneration of the Zend/PHP parsers (found: 3.0, ...

  4. vmware Centos6.6安装64位

    Centos6.6安装64位 必须开启BIOS中的虚拟化技术 首先开机进入BIOS,一般机器是按F2,我的T420是按F1,然后进入Security,Virtualization,选择Enable即可 ...

  5. Ubuntu常用命令之update-alternatives

    maintain symbolic links determining default commands update-alternatives creates, removes, maintains ...

  6. http请求与响应(content-type)

    http请求信息由浏览器把地址栏URL信息和页面(html.jsp.asp)组装成http请求消息体(如下). <request-line>(请求消息行)<headers>(请 ...

  7. HDU 4569 Special equations(取模)

    Special equations Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u S ...

  8. Web API系列(二)接口安全和参数校验

    以前简单介绍过web api 的设计,但是还是有很多朋友问我,如何合理的设计和实现web api.比如,接口安全,异常处理,统一数据返回等问题.所以有必要系统的总结总结 web api 的设计和实现. ...

  9. vtkPlane和vtkPlaneSource

    1.vtkPlane vtkPlane provides methods for various plane computations. These include projecting points ...

  10. HTML插入FLASH

    <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" code ...