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

思想： 通过取得颜色属性值得到的是 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. ASN.1笔记——语法规则与类型概述

    转载:https://blog.csdn.net/sever2012/article/details/7672699 一.简介 ASN.1(Abstract Syntax Notation doton ...

  2. T1，T2，T3 三个线程顺序执行

    T1,T2,T3 三个线程顺序执行 现在有 T1.T2.T3 三个线程,你怎样保证 T2 在 T1 执行完后执行,T3 在 T2 执行完后执行?(T1->T2->T3) 这个线程问题通常会 ...

  3. HDU 6185 Covering

    矩阵快速幂. 一开始的思路是$dfs$出一个矩阵,$k[i][j]$表示这一行是状态$i$,将这一行填满,下一行是$j$状态的方案数.然后就可以矩阵快速幂了,但是矩阵大小是$16*16$的,超时了.. ...

  4. 洛谷P1088 火星人 [STL]

    题目传送门 火星人 格式难调,题面就不放了. 分析: 这道题目不得不又让人感叹,还是$STL$大法好!!! $C++$的$algorithm$库中自带有$next\_permutation()$和$p ...

  5. GeneXus项目启动

    使用GeneXus产品开发项目时,在开始,有一些属性我会经常改一下.我现在使用的GeneXus版本是GeneXus U3,由于在做手机应用的开发,所以一般使用最新的版本,老外那边差不多两个月会有一个u ...

  6. EventBus机制 handler 区别

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 事件巴士 是 采用 观察者模式 实现 事件订阅总线, 可以用在 应用程序中, 组件之间, ...

  7. [Codeforces #201] Tutorial

    Link: 传送门 代码量很少的一套思维题 A: 试一试发现最后状态一定是所有$min,max$间$gcd$的倍数 直接判断数量的奇偶性即可 #include <bits/stdc++.h> ...

  8. ThinkPHP -- 去除URL中的index.php

    原路径是 http://localhost/test/index.php/index/add 想获得的地址是 http://localhost/test/index/add 那么如何去掉index.p ...

  9. mysql max_allowed_packet 设置

    mysql根据my.cnf中max_allowed_packet的大小来限制接收到的数据包大小. 据官网描述,如下图. 数据包的值范围为1k~1G, 只能是1024的倍数,不能整除1024的,会向下取 ...

  10. 所有浏览器打开后自动打开115.29.163.152/404.html这个网页，然后自动跳转到hao123 解决办法

    这几天,电脑所有浏览器打开后自动打开115.29.163.152/404.html这个网页,然后自动跳转到hao123这个网页,网上查询没解决办法.开始自己找,搜索注册表,都无效,最后下载软件Hija ...