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

思想： 通过取得颜色属性值得到的是 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. 《java虚拟机》----java内存区域与内存溢出异常

    No1: java虚拟机所管理的内存将会包括以下几个运行时数据区域 1.方法区 2.虚拟机栈 3.本地方法栈 4.堆 5.程序计数器 No2: 程序计数器: 程序计数器(Program Counter ...

  2. Angular Material Starter App

      介绍 Material Design反映了Google基于Android 5.0 Lollipop操作系统的原生应用UI开发理念,而AngularJS还发起了一个Angular Material ...

  3. 【UOJ #104】【APIO 2014】Split the sequence

    http://uoj.ac/problem/104 此题的重点是答案只与切割的最终形态有关,与切割顺序无关. 设\(f(i,j)\)表示前\(i\)个元素切成\(j\)个能产生的最大贡献. \(f(i ...

  4. 2017haoi总结

    暴力都写不对的蒟蒻QAQ 现在只看了上午的第二题..   AM.T2 写了40分的记忆化搜索,最差复杂度大概是n^3,100以下应该是稳过的..通过递归返回[l+1,r]的答案,l=r特判,int函数 ...

  5. BZOJ1002輪狀病毒 暴搜 + 找規律 + 高精度

    @[暴搜, 找規律, 高精度] Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个\(n\)轮状基由圆环上\(n\)个不同的基原子和圆心处一个核原子构成的,2个 ...

  6. bzoj 4874: 筐子放球

    4874: 筐子放球 Time Limit: 10 Sec  Memory Limit: 256 MB Description 小N最近在研究NP完全问题,小O看小N研究得热火朝天,便给他出了一道这样 ...

  7. redis实现简单延时队列(转)

    继之前用rabbitMQ实现延时队列,Redis由于其自身的Zset数据结构,也同样可以实现延时的操作 Zset本质就是Set结构上加了个排序的功能,除了添加数据value之外,还提供另一属性scor ...

  8. MYSQL学习笔记 （五）常用的聚合函数

    1.COUNT(e1) 语法:COUNT(e1) 参数:e1为一个表达式,可以是任意的数据类型 返回:返回数值型数据 作用:返回e1指定列不为空的记录总数 例子: 1)单独使用

  9. AS3使用Json 传复杂数据 -------- 用数组而不是向量

    package { public class Person { private var name:String; public function get Name():String { return ...

  10. Java容器-引入Guava类库

    目录 1.只读设置 2.函数式编程+组合式编程 3.约束条件 4.集合操作(并集.差集.交集) 代码实现 1.只读设置 public static void main(String [] args){ ...