获得网页的背景色和字体颜色，方法如下：

思想： 通过取得颜色属性值得到的是 rgb 色，不是我们想要的，所以需要将 rgb 色装换为 十六进制色 ，首先获得rgb色 ：

1 var rgb = document.getElementById('color').style.backgroundColor；

得到格式如下： rgb(225, 22, 23); 然后进行拆分：

1 var rgb = rgb.split('(')[1]; //拆分后为 [rgb, 225,22,23)]形式，长度为2的数组

再将 （225,22,23）字符串进行拆分（注意：只有number类型的才能转换，所以用 parseInt 强制转换类型！） ：

1 for(var k = 0; k < 3; k++){
2     str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据
3 }

最后的组合:

1 str = '#'+str[0]+str[1]+str[2];

整个代码如下：

01 <!DOCTYPE html>
02 <html>
03 <head>
04     <title>getHexColor js/jQuery 获得十六进制颜色</title>
05     <meta charset="utf-8" />
06     <script type="text/javascript">
07         function getHexBgColor(){
08              var str = [];
09              var rgb = document.getElementById('color').style.backgroundColor.split('(');
10              for(var k = 0; k < 3; k++){
11                str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
12              }
13              str = '#'+str[0]+str[1]+str[2];
14              document.getElementById('color').innerHTML = str;
15          }
16          function getHexColor(){
17              var str = [];
18              var rgb = document.getElementById('color').style.color.split('(');
19              for(var k = 0; k < 3; k++){
20                str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
21              }
22              str = '#'+str[0]+str[1]+str[2];
23              document.getElementById('color').innerHTML = str;
24          }
25     </script>
26     <style type="text/css">
27         #color{
28             width: 200px;
29             height: 200px; 
30             line-height: 200px;
31             text-align: center;
32         }
33     </style>
34 </head>
35 <body>
36     <div style="color: #88ee22; background-color: #ef8989;" id="color"></div>
37     <input onclick="getHexBgColor();" type="button" value="获得背景色" />
38     <input onclick="getHexColor();" type="button" value="获得字体颜色" />
39 </body>
40 </html>

js 获得网页背景色和字体色的更多相关文章

  1. js技术要点---JS 获取网页源代码

    JS 获取网页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html& ...

  2. JS判断网页是否在微信中打开/

    JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...

  3. javascript如何设置DIV背景色为随机色

    随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html 1.rgb(xxx,xxx,xxx) 2.#xxxxx ...

  4. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  5. Ifvisible.js – 判断网页中的用户是闲置还是活动状态

    ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...

  6. 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程

    JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...

  7. JS倒计时网页自动跳转代码

    <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...

  8. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  9. JS获取网页属性包括宽、高等

    JS获取网页属性包括宽.高等. function getInfo()  { // www.jbxue.com var s = "";  s += " 网页可见区域宽:&q ...

随机推荐

  1. Redis实战(四)

    配置好了web.config程序,并且能通过C#代码来读取和管理以上配置信息. 接下来,就可以进行Redis的数据写入了.Redis中可以用Store和StoreAll分别保存单条和多条数据,C#中具 ...

  2. Jenkins配置agent

    一. 通信协议 为了master和agent能够正常通信,连接的建立必须是双向的. SSH: master通过标准的SSH协议连接slave. Java Web Start: Java 应用在agen ...

  3. 洛谷 P4513 小白逛公园-区间最大子段和-分治+线段树区间合并(单点更新、区间查询)

    P4513 小白逛公园 题目背景 小新经常陪小白去公园玩,也就是所谓的遛狗啦… 题目描述 在小新家附近有一条“公园路”,路的一边从南到北依次排着nn个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩 ...

  4. 运用jquery做打印和导出操作

    我最近接手的项目中经常让做出打印和导出统计图和表格 首先说打印,打印如果用echarts做出来的图表,打印的时候,要借助jquery的打印插件. 打印插件: <script src=" ...

  5. post登录趴一趴百度贴吧美女

    本次爬取的贴吧是百度的美女吧,给广大男同胞们一些激励 在爬取之前需要在浏览器先登录百度贴吧的帐号,各位也可以在代码中使用post提交或者加入cookie 爬行地址:http://tieba.baidu ...

  6. FastReport.Net使用：[4]分组

    1.绘制报表标题和栏首. 2.设置报表栏,为数据区添加一个分组 3.右键分组页眉,在其右键菜单中选择“编辑”,显示分组编辑对话框. 设置分组条件,可直接通过下拉菜单选择Table表中的[学号]列:也能 ...

  7. Hibernate lazy（延迟加载）

    Hibernat加载策略有两种,分别为即时加载和延迟加载(懒加载或者lazy),get使用的是即时加载,使用get获取数据时会立即查找(会先去缓存查找,如果缓存中没有找到,才会去数据库中查找),而lo ...

  8. 【51Nod 1815】【算法马拉松 23】调查任务

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1815 tarjan缩点后在DAG上递推即可. 每个点维护所有根到它的路径 ...

  9. 【UOJ #107】【APIO 2013】ROBOTS

    http://uoj.ac/problem/107 设\(f(l,r,i,j)\)表示\([l,r]\)中的机器人聚集到\((i,j)\)需要花的最小操作数. \(f(l,r,i,j)=\min\le ...

  10. Matrix-tree定理 spoj HIGH

    Matrix-tree定理,给出一个无向图,问求出的生成树方案有多少种方案,利用Matrix-tree定理,主对角线第i行是i的度数,(i,j) 值为i和j之间边的数量,然后删去第一行第一列,利用初等 ...