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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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
pw的一个放后门的方法分析
2007/10/08 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
初学Javascript的一些总结
2008/11/03 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
2015/08/26 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
Python中除法使用的注意事项
2014/08/21 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
浅谈python可视化包Bokeh
2018/02/07 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python数据集切分实例
2018/12/08 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
化学相关工作求职信
2013/10/02 职场文书
函授本科自我鉴定
2014/02/04 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS