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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
VUE实现日历组件功能
Mar 13 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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 XML备份Mysql数据库
2009/05/27 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
python操作kafka实践的示例代码
2019/06/19 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
python多任务之协程的使用详解
2019/08/26 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
上课迟到检讨书100字
2014/01/11 职场文书
高中课程设置方案
2014/05/28 职场文书
小升初自荐信范文
2015/03/05 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书