获得网页的背景色和字体颜色，方法如下：
思想： 通过取得颜色属性值得到的是 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 数组保存拆分后的数据 |
最后的组合:
1 |
str = '#'+str[0]+str[1]+str[2]; |
整个代码如下：
04 |
<title>getHexColor js/jQuery 获得十六进制颜色</title> |
05 |
<meta charset="utf-8" /> |
06 |
<script type="text/javascript"> |
07 |
function getHexBgColor(){ |
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); |
13 |
str = '#'+str[0]+str[1]+str[2]; |
14 |
document.getElementById('color').innerHTML = str; |
16 |
function getHexColor(){ |
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); |
22 |
str = '#'+str[0]+str[1]+str[2]; |
23 |
document.getElementById('color').innerHTML = str; |
26 |
<style type="text/css"> |
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="获得字体颜色" /> |
- js技术要点---JS 获取网页源代码
JS 获取网页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html& ...
- JS判断网页是否在微信中打开/
JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...
- javascript如何设置DIV背景色为随机色
随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html 1.rgb(xxx,xxx,xxx) 2.#xxxxx ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- Ifvisible.js – 判断网页中的用户是闲置还是活动状态
ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...
- 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程
JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...
- JS倒计时网页自动跳转代码
<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...
- js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...
- JS获取网页属性包括宽、高等
JS获取网页属性包括宽.高等. function getInfo() { // www.jbxue.com var s = ""; s += " 网页可见区域宽:&q ...
随机推荐
- SQL Server中Rowcount与@@Rowcount
rowcount的用法 rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10 select * from 表A 这样的查询只会 ...
- 洛谷P2471 [SCOI2007] 降雨量 [RMQ，模拟]
题目传送门 降雨量 题目背景 07四川省选 题目描述 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小于X ...
- 初拾Java（问题一：404错误，页面找不到）
做测试尤其是想走自动化测试之路的人,怎么可以不会码代码?!怒了... 再次开始拾起Java,坚持坚持!!! 刚写了一个JSP页面,想在Myeclipse里面跑来试试,结果搞了半天出现以下错误: 试着去 ...
- GeneXus项目启动
使用GeneXus产品开发项目时,在开始,有一些属性我会经常改一下.我现在使用的GeneXus版本是GeneXus U3,由于在做手机应用的开发,所以一般使用最新的版本,老外那边差不多两个月会有一个u ...
- scrapy抓取拉勾网职位信息（七）——数据存储（MongoDB，Mysql，本地CSV）
上一篇完成了随机UA和随机代理的设置,让爬虫能更稳定的运行,本篇将爬取好的数据进行存储,包括本地文件,关系型数据库(以Mysql为例),非关系型数据库(以MongoDB为例). 实际上我们在编写爬虫r ...
- 洛谷——P3376 【模板】网络最大流
题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行 ...
- innerText和innerHTML， outerHTML
js中 innerHTML与innerText的用法与区别及解决Firefox不支持Js的InnerHtml问题 用法: <div id="test"> <spa ...
- 【BZOJ 4169】 4169: Lmc的游戏 （树形DP）
4169: Lmc的游戏 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 44 Solved: 25 Description RHL有一天看到lmc在 ...
- [BZOJ4553][TJOI2016&&HEOI2016]序列(CDQ分治)
4553: [Tjoi2016&Heoi2016]序列 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1202 Solved: 554[Su ...
- [ZJOI2007]最大半连通子图
[ZJOI2007]最大半连通子图 题目大意: 一个有向图称为半连通的,当且仅当对于任意两点\(u,v\),都满足\(u\)能到达\(v\)或者\(v\)能到达\(u\). 给定一个\(n(n\le1 ...
