首页 web前端 js教程 jQuery获取样式中的背景颜色属性值/颜色值_jquery

jQuery获取样式中的背景颜色属性值/颜色值_jquery

May 16, 2016 pm 05:46 PM
属性值 背景颜色

天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome、Firefox中则是以GRB格式显示rgb(255,0,0),由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的)。搜索了一下,从国外的一个网站上得到一段代码

复制代码 代码如下:

$.fn.getHexBackgroundColor = function() {
var rgb = $(this).css('background-color');
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
return rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

解决办法
上面定义的是一个jQuery函数,我们可以通过 $("#bg").getHexBackgroundColor(); 获取到标签id="bg"的background-color的RGB值

下面做一下小小的修改,就是加一个判断,如果是IE浏览器就直接拿值,如果是非IE浏览器则将值转换成RGB格式:
复制代码 代码如下:

$.fn.getHexBackgroundColor = function() { var rgb = $(this).css('background-color'); if(!$.browser.msie){ rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);} rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); } return rgb; }

jQuery获取样式表中的属性值
复制代码 代码如下:


aaaa







本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在Eclipse中如何调整背景颜色设置 在Eclipse中如何调整背景颜色设置 Jan 28, 2024 am 09:08 AM

如何在Eclipse中设置背景颜色?Eclipse是广受开发人员欢迎的集成开发环境(IDE),可用于各种编程语言的开发。它非常强大且灵活,可以通过设置来自定义界面及编辑器的外观。本文将介绍如何在Eclipse中设置背景颜色,并提供具体的代码示例。一、更改编辑器背景颜色打开Eclipse,并进入“Windows”菜单。选择“Preferences”。在左侧导航

editplus如何设置背景颜色-editplus设置背景颜色的方法 editplus如何设置背景颜色-editplus设置背景颜色的方法 Mar 04, 2024 pm 07:00 PM

小伙伴们知道editplus如何设置背景颜色吗?今天小编就来讲解editplus设置背景颜色的方法,感兴趣的快跟小编一起来看看吧,希望能够帮助到大家。第一步:首先打开editplus,点击上方的Tools,如图:第二步:在工具菜单中,点击preferences,如图:第三步:在首选项页面,点击左侧的colors,如图:第四步:在background位置,根据需要选择颜色即可,如图:

用Eclipse更改背景颜色的逐步指南 用Eclipse更改背景颜色的逐步指南 Jan 28, 2024 am 08:28 AM

一步步教你在Eclipse中更改背景颜色,需要具体代码示例Eclipse是一款非常流行的集成开发环境(IDE),经常被用来编写和调试Java项目。在默认情况下,Eclipse的背景颜色是白色,但是有些用户可能希望更改背景颜色以适应自己的喜好或减轻眼部疲劳。本文将一步步教你如何在Eclipse中更改背景颜色,并提供具体的代码示例。步骤1:打开Eclipse首先

PyCharm背景颜色修改方法详解 PyCharm背景颜色修改方法详解 Jan 04, 2024 am 11:03 AM

PyCharm是一款功能强大的Python集成开发环境(IDE),它为开发者提供了许多方便的功能和工具。其中一个常用的功能是修改PyCharm的背景颜色。在这篇文章中,我将详细介绍PyCharm背景颜色修改的方法,并提供具体的代码示例。要修改PyCharm的背景颜色,我们需要进行以下几个步骤:第一步:打开PyCharm并点击"File"菜单下的"Settin

Eclipse背景色配置指南 Eclipse背景色配置指南 Jan 28, 2024 am 10:44 AM

Eclipse背景颜色设置教程Eclipse是一款非常受欢迎的集成开发环境(IDE),用于开发各种编程语言的应用程序。它具有丰富的功能和灵活的配置选项,可以根据个人需求进行自定义设置。其中一个常见的个性化需求就是更改Eclipse的背景颜色。这篇文章将向你详细介绍如何设置Eclipse的背景颜色。我们将提供具体的代码示例来帮助你快速实现这一目标。步骤1:打

word背景颜色怎么去掉?去掉word背景颜色的方法 word背景颜色怎么去掉?去掉word背景颜色的方法 Mar 04, 2024 am 10:10 AM

Word是一款由微软公司开发的文字文档处理工具。它提供了丰富的文档编辑功能,包括文本输入、表格制作、格式调整等,可以轻松地创建和编辑各种类型的文档,如报告、简历并且提供更丰富的模板和图形功能。正因为我们长时间使用word办公,背景颜色不合适可能会让我们视觉疲劳,甚至影响办公速度,那么就很有学习去掉word背景颜色的方法了。word背景颜色怎么去掉?去掉word背景颜色的方法1、打开需内要操作的WORD文档容,在工具栏中点击“页面布局”标签页。2、找到并点击“页面颜色”,并选择“无颜色”即可。3、

win7如何修改窗口背景颜色 win7如何修改窗口背景颜色 Dec 30, 2023 pm 12:31 PM

我们在使用win7系统的时候,可以手动设置窗口背景颜色,从而获得更好的视觉感受,如果设置成保护色还能保护我们的视力,而且方法非常简单,只需要在个性化的高级外观设置中就可以设置了,下面就一起来学习一下吧。win7窗口背景颜色设置教程1、首先进入“个性化”设置2、接着选择“窗口颜色”设置3、点击下方的“高级外观设置”4、将项目设置为“窗口”5、然后点击右侧的“颜色”,选择想要的颜色。6、设置完成之后确定,就可以看到我们的窗口背景颜色变了。

利用 jQuery 快速更新表格行属性值的实用技巧 利用 jQuery 快速更新表格行属性值的实用技巧 Feb 25, 2024 pm 02:51 PM

标题:实用提示:利用jQuery快速修改表格行的属性值在网页开发中,常常会遇到需要通过JavaScript来动态修改表格行的属性值的情况。而利用jQuery,可以在编写简洁、高效的代码的同时,快速实现这一功能。下面将分享一些实用的提示,以便在实际项目中更加方便地操作和修改表格行的属性值。1.获取表格行的属性值在使用jQuery修改表格行的属性

See all articles