js获取及修改网页背景色和字体色的方法


Posted in Javascript onDecember 29, 2015

本文实例讲述了js获取及修改网页背景色和字体色的方法。分享给大家供大家参考,具体如下:

获得网页的背景色和字体颜色,方法如下:

思想: 通过取得颜色属性值得到的是 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改变背景色的方法如下:

<body leftmargin=5 topmargin=0 onmouseover="document_onmouseover();"onclick="document_onclick();" id="all" >
<SCRIPT LANGUAGE="javascript">
var curObj= null;
var curObjmouseover=null;
function document_onclick() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
curObjmouseover.style.background='';
if(curObj!=null)
curObj.style.background='';
curObj=window.event.srcElement;
curObj.style.background='#ff0099';
  }
}
function document_onmouseover() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
{curObjmouseover.style.background='';
curObjmouseover.style.color='#000000';}
if(curObj!=null)
curObj.style.background='';
curObjmouseover=window.event.srcElement;
curObjmouseover.style.background='#cccc00';
curObjmouseover.style.color='#ffffff';
  }
}
 </SCRIPT>
<div>
 <a href='#'>来自三水点靠木</a> </div>
<div> <a href='#'>来自三水点靠木</a> </div>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
JavaScript错误处理
Feb 03 Javascript
Position属性之relative用法
Dec 14 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
基于JavaScript实现的插入排序算法分析
Apr 14 Javascript
微信小程序之购物车功能
Sep 23 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 #Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 #Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 #Javascript
javascript实现下拉提示选择框
Dec 29 #Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 #Javascript
js+css简单实现网页换肤效果
Dec 29 #Javascript
Jquery使用小技巧汇总
Dec 29 #Javascript
You might like
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
JQUERY CHECKBOX全选,取消全选,反选方法三
2008/08/30 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
Js apply方法详解
2017/02/16 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
python 读取鼠标点击坐标的实例
2018/12/29 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Pygame框架实现飞机大战
2020/08/07 Python
python实现磁盘日志清理的示例
2020/11/05 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
乡镇综治宣传月活动总结
2014/07/02 职场文书
怎样写家长意见
2015/06/04 职场文书
windows安装python超详细图文教程
2021/05/21 Python