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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
基于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获取mysql版本的几种方法小结
2008/03/25 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
jquery ajax例子返回值详解
2012/09/11 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
vue中tab选项卡的实现思路
2018/11/25 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
办加油卡单位介绍信
2014/01/09 职场文书
招聘单位介绍信
2014/01/14 职场文书
大学生实习证明范本
2014/01/15 职场文书
商务考察邀请函范文
2014/01/21 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
党建工作汇报材料
2014/12/24 职场文书
小学教师党员承诺书
2015/04/27 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
详解OpenCV曝光融合
2022/04/29 Python