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

思想： 通过取得颜色属性值得到的是 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. spring_150907_sqlmapclientdaosupport_getSqlMapClient

    1.新建java工程:spring_150907_sqlmapclientdaosupport_getSqlMapClient,如下图所示: 2.工程里添加spring.hibernate.ibati ...

  2. list 移除值

    1. 移除基本类型值时,传入int 会以下标为依据移除 , 但传入Integer 对象时,则是移除对象为依据移除(即不受此对象代表的值相等的下标的影响) 都是只能移除一个值,(list 中有多个1时, ...

  3. Codeforces Round #492 (Div. 2) [Thanks, uDebug!]

    这次的题好奇怪哦... C - Tesla 思路:先把跟停车位相邻的车停进去,然后开始转圈... #include<bits/stdc++.h> #define LL long long ...

  4. 专业的抢票软件 12306bypass

    专业的抢票软件 https://www.12306bypass.com/

  5. 【C#】字段总结

    前沿: 字段(field)是一种数据成员,其中容纳了一个值类型的实例或者一个引用类型的引用. 正文: CLR支持类型(静态)字段和实例(非静态)字段.对于类型字段,用于容纳字段数据的动态内存是在类型对 ...

  6. URAL 1995 Illegal spices

    构造. 前$n-k$个都是$1$,最后$k$个进行构造,首先选择填与上一个数字一样,如果不可行,那么这一格的值$+1$. #include<map> #include<set> ...

  7. heartbeat与keepalived的区别

    Heartbeat与Keepalived的区别 Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称VRRP):H ...

  8. PHP代码重用

    代码重用 include() 和require() 都是载入文件 include()如果载入的文件不存在,提示警告错误,程序还可以继续执行 require()如果载入的文件不存在,致命性错误,程序终止 ...

  9. [USACO06FEC]Milk Patterns --- 后缀数组

    [USACO06FEC]Milk Patterns 题目描述: Farmer John has noticed that the quality of milk given by his cows v ...

  10. WC2018伪题解

    NOIP分数过低的场外选手,一个月之后才有幸膜到这套卷子.感觉题目质量很不错啊,可惜了T1乱搞可过,T2题目出锅非集训队员没有通知到,导致风评大幅被害. 感觉Cu的话随手写两个暴力就稳了,Ag的话T3 ...