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

思想： 通过取得颜色属性值得到的是 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. Codeforces Round #222 (Div. 1) D. Developing Game

    D - Developing Game 思路:我们先枚举左边界,把合法的都扣出来,那么对于这些合法的来说值有v 和 r两维了,把v, r看成线段的两端, 问题就变成了,最多能选多少线段 使得不存在这样 ...

  2. 范浩强treap 普通平衡树

    增加Split(分裂),Merge(合并)操作,非常好写,时间也不比普通treap慢什么. #include<bits/stdc++.h> using namespace std; str ...

  3. ARC 101 C - Candles

    题面在这里! 显然直接枚举左端点(右端点)就OK啦. #include<cstdio> #include<cstdlib> #include<algorithm> ...

  4. 【BIT套主席树】COGS257-动态排名系统

    题意同BZOJ1901,多组数据,数据范围也不一样.重新写一遍复习一下. #include<iostream> #include<cstdio> #include<cst ...

  5. [CC-STREETTA]The Street

    [CC-STREETTA]The Street 题目大意: 给定两个长度为\(n(n\le10^9)\)的数列\(A\)和\(B\),开始数列\(A\)中每一项值为\(-\infty\),数列\(B\ ...

  6. liblinear参数及使用方法（原创）

    开发语言:JAVA 开发工具:eclipse (下载地址 http://www.eclipse.org/downloads/) liblinear版本:liblinear-1.94.jar (下载地址 ...

  7. bzoj 1269 bzoj 1507 Splay处理文本信息

    bzoj 1269 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1269 大致思路: 用splay维护整个文本信息,splay树的中序遍历即为 ...

  8. Codeforces Beta Round #7 C. Line Exgcd

    C. Line 题目连接: http://www.codeforces.com/contest/7/problem/C Description A line on the plane is descr ...

  9. hssworkbook 用法案例

    public ActionResult excelPrint() { HSSFWorkbook workbook = new HSSFWorkbook();// 创建一个Excel文件 HSSFShe ...

  10. SecureCRT也能和Xshell一样批量导入主机

    在Xshell可以像这样一个文件批量导入主机: https://blog.netsarang.com/91/importing-csv-formatted-host-information-to-xs ...