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 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
微信QQ的二维码登录原理js代码解析
Jun 23 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
Django使用多数据库的方法
Sep 06 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
vue实现简单图片上传
Jun 30 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
php输出表格的实现代码(修正版)
2010/12/29 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
Node做中转服务器转发接口
2017/10/18 Javascript
react build 后打包发布总结
2018/08/24 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python读取文件名称生成list的方法
2018/04/27 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
公务员保密承诺书
2014/03/27 职场文书
安全负责人任命书
2014/06/06 职场文书
学习雷锋标语
2014/06/25 职场文书
团员年度个人总结
2015/02/26 职场文书
会计求职简历自我评价
2015/03/10 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书