js获得网页背景色和字体色的方法


Posted in Javascript onMarch 21, 2014

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

思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为 十六进制色 ,首先获得rgb色 :

var rgb = document.getElementById('color').style.backgroundColor;

得到格式如下: rgb(225, 22, 23); 然后进行拆分:
var rgb = rgb.split('(')[1]; //拆分后为 [rgb, 225,22,23)]形式,长度为2的数组

再将 (225,22,23)字符串进行拆分(注意:只有number类型的才能转换,所以用 parseInt 强制转换类型!) :
for(var k = 0; k < 3; k++){ 
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据 
}

最后的组合:
str = '#'+str[0]+str[1]+str[2];

整个代码如下:
<!DOCTYPE html> 
<html> 
<head> 
<title>getHexColor js/jQuery 获得十六进制颜色</title> 
<meta charset="utf-8" /> 
<script type="text/javascript"> 
function getHexBgColor(){ 
var str = []; 
var rgb = document.getElementById('color').style.backgroundColor.split('('); 
for(var k = 0; k < 3; k++){ 
str[k] = parseInt(rgb[1].split(',')[k]).toString(16); 
} 
str = '#'+str[0]+str[1]+str[2]; 
document.getElementById('color').innerHTML = str; 
} 
function getHexColor(){ 
var str = []; 
var rgb = document.getElementById('color').style.color.split('('); 
for(var k = 0; k < 3; k++){ 
str[k] = parseInt(rgb[1].split(',')[k]).toString(16); 
} 
str = '#'+str[0]+str[1]+str[2]; 
document.getElementById('color').innerHTML = str; 
} 
</script> 
<style type="text/css"> 
#color{ 
width: 200px; 
height: 200px; 
line-height: 200px; 
text-align: center; 
} 
</style> 
</head> 
<body> 
<div style="color: #88ee22; background-color: #ef8989;" id="color"></div> 
<input onclick="getHexBgColor();" type="button" value="获得背景色" /> 
<input onclick="getHexColor();" type="button" value="获得字体颜色" /> 
</body> 
</html>
Javascript 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
React如何避免重渲染
Apr 10 Javascript
页面装载js及性能分析方法介绍
Mar 21 #Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 #Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 #Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 #Javascript
将中国标准时间转换成标准格式的代码
Mar 20 #Javascript
如何将php数组或者对象传递给javascript
Mar 20 #Javascript
You might like
论建造顺序的重要性
2020/03/04 星际争霸
PHP 用数组降低程序的时间复杂度
2009/12/04 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
JS实现日期加减的方法
2013/11/29 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python Nose框架编写测试用例方法
2017/10/26 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
python生成n个元素的全组合方法
2018/11/13 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
分享一个python的aes加密代码
2020/12/22 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
关于Redis的主从复制及哨兵问题
2022/06/16 Redis