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权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
js简单抽奖代码
Jan 16 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
简单了解Vue computed属性及watch区别
Jul 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
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
php 伪静态之IIS篇
2014/06/02 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php控制文件下载速度的方法
2015/03/24 PHP
php正则修正符用法实例详解
2016/12/29 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
node.js基础知识小结
2018/02/26 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
python入门教程之基本算术运算符
2020/11/13 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
毕业生个人自荐书
2015/03/05 职场文书
党员转正意见怎么写
2015/06/03 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers
i7 6700处理器相当于i5几代
2022/04/19 数码科技