js 获得网页背景色和字体色

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

思想：通过取得颜色属性值得到的是 rgb 色，不是我们想要的，所以需要将 rgb 色装换为十六进制色，首先获得rgb色：

`1`	`var` `rgb = document.getElementById('color').style.backgroundColor；`

得到格式如下： rgb(225, 22, 23); 然后进行拆分：

`1`	`var` `rgb = rgb.split('(')[1];` `//拆分后为 [rgb, 225,22,23)]形式，长度为2的数组`

再将（225,22,23）字符串进行拆分（注意：只有number类型的才能转换，所以用 parseInt 强制转换类型！）：

`1`	`for(var` `k = 0; k < 3; k++){`

`2`	`str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据`

3 }

最后的组合:

`1`	`str =` `'#'+str[0]+str[1]+str[2];`

整个代码如下：

`01`	`<!DOCTYPE html>`

02 <html>

03 <head>

`04`	`<title>getHexColor js/jQuery 获得十六进制颜色</title>`

`05`	`<meta charset="utf-8"` `/>`

`06`	`<script type="text/javascript">`

`07`	`function` `getHexBgColor(){`

`08`	`var` `str = [];`

`09`	`var` `rgb = document.getElementById('color').style.backgroundColor.split('(');`

`10`	`for(var` `k = 0; k < 3; k++){`

`11`	`str[k] = parseInt(rgb[1].split(',')[k]).toString(16);`

12 }

`13`	`str =` `'#'+str[0]+str[1]+str[2];`

`14`	`document.getElementById('color').innerHTML = str;`

15 }

`16`	`function` `getHexColor(){`

`17`	`var` `str = [];`

`18`	`var` `rgb = document.getElementById('color').style.color.split('(');`

`19`	`for(var` `k = 0; k < 3; k++){`

`20`	`str[k] = parseInt(rgb[1].split(',')[k]).toString(16);`

21 }

`22`	`str =` `'#'+str[0]+str[1]+str[2];`

`23`	`document.getElementById('color').innerHTML = str;`

24 }

`25`	`</script>`

`26`	`<style type="text/css">`

27 #color{

`28`	`width: 200px;`

`29`	`height: 200px;`

`30`	`line-height: 200px;`

`31`	`text-align: center;`

32 }

`33`	`</style>`

34 </head>

35 <body>

`36`	`<div style="color: #88ee22; background-color: #ef8989;"` `id="color"></div>`

`37`	`<input onclick="getHexBgColor();"` `type="button"` `value="获得背景色"` `/>`

`38`	`<input onclick="getHexColor();"` `type="button"` `value="获得字体颜色"` `/>`

39 </body>

40 </html>

转载于:https://www.cnblogs.com/ranzige/p/3615478.html

js 获得网页背景色和字体色相关推荐

js 获取html文字颜色,js获得网页背景色和字体色的方法
获得网页的背景色和字体颜色,方法如下: 思想: 通过取得颜色属性值得到的是 rgb 色,不是我们想要的,所以需要将 rgb 色装换为十六进制色 ,首先获得rgb色 : var rgb = docum ...
Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色
el-tree默认选中的背景色是白色,有时候我们需求是一进入到页面就要发请求,并且设置默认选中的背景色改为蓝色,字体色为白色,然后选中的项也是背景色改为蓝色,字体色为白色,那这个时候我们可以给el-t ...
MFC开发IM-设置 static的背景色和字体色
//对控件的颜色,字体进行设置 HBRUSH mainDlg::OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor) { HBRUSH hbr ...
【Qt】 QPropertyAnimation，自定义动画，控件背景色字体色变换
运用QPropertyAnimation实现动画,进行背景色和字体色的黑白变换. [Q tea 原创] 源文件下载地址:https://download.csdn.net/download/scz65 ...
Android 隐藏状态栏，沉浸式状态栏，状态栏背景色，状态栏字体色，透明状态工具类
设置状态栏颜色 if (Build.VERSION.SDK_INT>21){getWindow().setStatusBarColor(getResources().getColor(R ...
js技术要点---JS 获取网页源代码
JS 获取网页源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html& ...
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...
JS 实现网页截屏五种方法
最近研究了下如何利用JavaScript实现网页截屏,包括在浏览器运行的JS,以及在后台运行的nodeJs的方法.主要看了以下几个: PhantomJS Puppeteer(chrome headle ...
修改导航栏的背景色和字体颜色
项目基本接近尾声,闲来无事,把项目中用的的一些平时不常用的小技巧总结一下.以前每次使用都是现用现查,想着反正也都能查出来,就没有做记录.因为很多也都记不住,用完时间长不用的话就又忘了.现在有时间,自己 ...
android shape 无边框颜色,Android 使用shape定义不同控件的的颜色、背景色、边框色...
Android 使用shape定义不同控件的的颜色.背景色.边框色设置按钮的右边框和底边框颜色为红色,边框大小为3dp: 在drawable新建一个 buttonstyle.xml的文件,内容如下: ...

js 获得网页背景色和字体色

js 获得网页背景色和字体色相关推荐

最新文章

热门文章