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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
Vue实现双向数据绑定
May 03 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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中看实例学正则表达式
2006/12/25 PHP
php include类文件超时问题处理
2015/02/06 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python与pycharm有何区别
2020/07/01 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
法人委托书范本
2014/04/04 职场文书
捐助倡议书范文
2014/04/15 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
培训计划通知
2015/07/15 职场文书
礼貌问候语大全
2015/11/10 职场文书
python神经网络ResNet50模型
2022/05/06 Python