jQuery获取样式中颜色值的方法

本文实例讲述了jQuery获取样式中颜色值的方法。分享给大家供大家参考。具体分析如下：

今天使用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程序设计有所帮助。

赞 (0)

相关推荐

  • jquery 操作css样式、位置、尺寸方法汇总

    一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti

  • JQuery操作元素的css样式

    我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"

  • Jquery使用css方法改变样式实例

    本文实例讲述了Jquery使用css方法改变样式.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

  • jQuery使用addClass()方法给元素添加多个class样式

    本文实例讲述了jQuery使用addClass()方法给元素添加多个class样式的方法.分享给大家供大家参考.具体如下: jQuery通过addClass()方法给元素添加多个class,只需要在添加的class中用空格分开多个class既可 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(doc

  • jQuery实现鼠标划过修改样式的方法

    本文实例讲述了jQuery实现鼠标划过修改样式的方法.分享给大家供大家参考.具体如下: $(document).ready(function () { //默认情况下样式 $("input:text").attr("style","border:1px solid #7E9DB9;"); //鼠标移入样式 $("input:text").mouseover(function () { $(this).attr("st

  • jQuery给多个不同元素添加class样式的方法

    本文实例讲述了jQuery给多个不同元素添加class样式的方法.分享给大家供大家参考.具体分析如下: jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){

  • JQuery实现样式设置、追加、移除与切换的方法

    本文实例讲述了JQuery实现样式设置.追加.移除与切换的方法.分享给大家供大家参考.具体分析如下: 有了JQuery,元素的样式操作会变得相当简易.下面我们来看看如何使用JQuery来实现元素样式的获取.设置.追加.删除以及其它一些操作. 获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p").attr("class"); /

  • jQuery获取样式中颜色值的方法

    本文实例讲述了jQuery获取样式中颜色值的方法.分享给大家供大家参考.具体分析如下: 今天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,0,0)],由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码: $.fn

  • JQuery获取样式中的background-color颜色值的问题

    今天使用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,255,0)],而我需要的是十六进制的颜色值,用于存储到数据库中,在网上找到下段代码能解决此问题: 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { var rgb = $(this)

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

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

  • 使用jquery获取网页中图片高度的两种方法

    使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 复制代码 代码如下: $("img").whith();(返回纯数字) $("img").css("width");(返回字符串:数字+"px") 但是有时候会遇到返回0的情况,上面方法返回值竟然是0或者0px,很让人诧异 方法一 在很早之前,我使用的解决方法,这也是我的师傅告诉我的解决方法:在你需要获取到的图片的<img>标签上

  • jQuery替换textarea中换行的方法

    本文实例讲述了jQuery替换textarea中换行的方法.分享给大家供大家参考.具体分析如下: 昨天同事在学习jQuery的时候,希望使用替换掉textarea中的换行. html部分: <fieldset> <textarea id="ncontent"></textarea> </fieldset> <button id="submit">提 交</button> js部分: $(docu

  • JS之获取样式的简单实现方法(推荐)

    基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100

  • jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)

    本文实例讲述了jQuery获取访问者IP地址的方法.分享给大家供大家参考,具体如下: <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //通过调用新浪IP地址库接口查询用户当前所在国家.省份.城市.运营商信息 $.g

  • jQuery获取单击节点对象的方法

    本文实例讲述了jQuery获取单击节点对象的方法.分享给大家供大家参考,具体如下: event.target属性: <script language="JavaScript" type="text/javascript"> $("document").ready(function () { $(".menu").bind("click", function (event) { var click

  • jquery获取及设置outerhtml的方法

    本文实例讲述了jquery获取及设置outerhtml的方法.分享给大家供大家参考.具体分析如下: 在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. 很多jQuery的使用者都对这一问题深感疑惑.为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢? 因为原生JS DOM里有一个内置属

  • 使用jquery获取url以及jquery获取url参数的实现方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多么重要的事情 首先看看单纯的通过javascript是如何来获取url中的某个参数 function getUrlParam(name) { va

随机推荐