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. 五.Jenkins安装plugin

    http://blog.csdn.net/jmyue/article/details/9376237

  2. 二.持续集成之--WEB后台

    1.系统管理-系统设置:把linux服务器加进去 2.General配置 3.源码管理: 4.构建触发器 5.构建环境 6.构建 7.构建后操作

  3. csv 中 数值被自动转换成科学计数法 的问题 excel打开后数字用科学计数法显示且低位变0的解决方法

    保存在csv中的 013812345678,前面的0会被去掉,后面是科学计数法显示.保存成 col1,="013812345678" 即可. 注意,分隔符逗号后面直接接“=”等号. ...

  4. 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流

    http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

  5. BZOJ4700: 适者

    先排序,枚举删一个点,在前面找出最优的另一个点,容易推出斜率方程,平衡树维护凸包. #include<bits/stdc++.h> using namespace std; typedef ...

  6. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  7. 12月4日PHPCMS模板

    cms的样式有很多种,我们学习的是phpcms,这些cms都是大同小异,学会了一种就可以使用其它的cms. PHPCMS是一款网站管理软件.该软件采用模块化开发,支持多种分类方式,使用它可方便实现个性 ...

  8. 报错:init: Could not find wglGetExtensionsStringARB!

    如下操作即可恢复:

  9. mysql代码执行漏洞

    mysql  (5.7, 5.6, 和 5.5版本)的所有默认安装配置,包括最新的版本,攻击者可以远程和本地利用该漏洞.该漏洞需要认证访问MYSQL数据库(通过网络连接或者像phpMyAdmin的we ...

  10. OnClick和OnClientClick的区别

    OnClientClick是客户端事件处理方法,一般采用JavaScript来进行处理,也就是直接在IE端运行,一点击就运行. OnClick是服务器端事件处理方法,在服务器端也就是IIS中运行,点击 ...