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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 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及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
对Python中range()函数和list的比较
2018/04/19 Python
基于python的Paxos算法实现
2019/07/03 Python
python创建n行m列数组示例
2019/12/02 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
倡议书范文格式
2014/05/12 职场文书
百日安全生产活动总结
2014/07/05 职场文书
普通党员整改措施
2014/10/24 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
Python中的套接字编程是什么?
2021/06/21 Python