jQuery獲取樣式中的背景顏色屬性值/顏色值
更新時間：2012年12月17日 16:56:48 作者：
天使用jQuery獲取樣式中的background-color的值時發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，IE中是以HEX格式顯示#ffff00，而Chrome、Firefox中則是以GRB格式顯示rgb(255,0,0)，由于需要將顏色值存儲到數(shù)據(jù)庫中，所以想讓顏色值的格式統(tǒng)一下（其實不統(tǒng)一也是可以存的）。搜索了一下，從國外的一個網(wǎng)站上得到一段代碼
天使用jQuery獲取樣式中的background-color的值時發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，IE中是以HEX格式顯示#ffff00，而Chrome、Firefox中則是以GRB格式顯示rgb(255,0,0)，由于需要將顏色值存儲到數(shù)據(jù)庫中，所以想讓顏色值的格式統(tǒng)一下（其實不統(tǒng)一也是可以存的）。搜索了一下，從國外的一個網(wǎng)站上得到一段代碼
$.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函數(shù)，我們可以通過 $("#bg").getHexBackgroundColor(); 獲取到標簽id="bg"的background-color的RGB值
下面做一下小小的修改，就是加一個判斷，如果是IE瀏覽器就直接拿值，如果是非IE瀏覽器則將值轉(zhuǎn)換成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獲取樣式表中的屬性值
<html>
<head><title>aaaa</title></head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".one > a").click(function(){
<SPAN style="COLOR: #ff0000">var ba=$(this)[0].style.background;</SPAN> alert($(this).html()+ba);
if(ba=="url(jia1.jpg) no-repeat")
{$(this).css({background:"url(jia.jpg) no-repeat"});}
else
$(this).css({background:"url(jia1.jpg) no-repeat"});
});
});
</script>
<style type="text/css">
#left .one a{background:url(jia1.jpg) no-repeat;
padding-left:18px;
padding-top:5px;
cursor:hand;
}
</style>
<body>
<div id="left">
<img src="lefttop.jpg" />
<ul>
<li class="one"> <a>信息中心 </a>
<ul>
<li class="two"> <a href="#">信息?件箱 </a> </li>
<li class="two"> <a href="#">信息收件箱 </a> </li>
</ul>
</li>
<li class="one"> <a>我要采? </a> </li>
</ul>
</div>
</body>
</html>
復制代碼 代碼如下:
$.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函數(shù)，我們可以通過 $("#bg").getHexBackgroundColor(); 獲取到標簽id="bg"的background-color的RGB值
下面做一下小小的修改，就是加一個判斷，如果是IE瀏覽器就直接拿值，如果是非IE瀏覽器則將值轉(zhuǎn)換成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獲取樣式表中的屬性值
復制代碼 代碼如下:
<html>
<head><title>aaaa</title></head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".one > a").click(function(){
<SPAN style="COLOR: #ff0000">var ba=$(this)[0].style.background;</SPAN> alert($(this).html()+ba);
if(ba=="url(jia1.jpg) no-repeat")
{$(this).css({background:"url(jia.jpg) no-repeat"});}
else
$(this).css({background:"url(jia1.jpg) no-repeat"});
});
});
</script>
<style type="text/css">
#left .one a{background:url(jia1.jpg) no-repeat;
padding-left:18px;
padding-top:5px;
cursor:hand;
}
</style>
<body>
<div id="left">
<img src="lefttop.jpg" />
<ul>
<li class="one"> <a>信息中心 </a>
<ul>
<li class="two"> <a href="#">信息?件箱 </a> </li>
<li class="two"> <a href="#">信息收件箱 </a> </li>
</ul>
</li>
<li class="one"> <a>我要采? </a> </li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:
相關(guān)文章
jQuery+jRange實現(xiàn)滑動選取數(shù)值范圍特效
本文向大家介紹一款范圍選擇器插件jRange，它是基于jQuery的一款簡單插件。本站之前有類似文章：jQuery+CSS使用滑塊選取價格范圍，其中不太好的地方是使用了jqueryui龐大的插件庫，有興趣的朋友可以看看。下面我們來看下插件jRange的使用。2015-03-03
基于jquery實現(xiàn)鼠標滾輪驅(qū)動的圖片切換效果
這篇文章主要介紹了基于jquery實現(xiàn)鼠標滾輪驅(qū)動的圖片切換效果，操作簡單，適合用在產(chǎn)片展示網(wǎng)站中，需要的朋友可以參考下2015-10-10
jQuery dateRangePicker插件使用方法詳解
這篇文章主要為大家詳細介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JQuery實現(xiàn)的彈出層，js和css可根據(jù)自己的實際情況而定，下面是具體的實現(xiàn)代碼，大家不妨參考下2014-05-05
jQuery插件Easyui設(shè)置datagrid的pageNumber導致兩次請求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設(shè)置datagrid的pageNumber導致兩次請求問題的解決方法,較為詳細的描述了出現(xiàn)的問題、問題的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08
jquery插件，有幾種方法，有全局的，有對象方法的，一直覺得jquery插件迷迷糊糊，這陣子特地研究下，供那些像我一樣的初學者借鑒下。嘻嘻2012-08-08
BootStrap中按鈕點擊后被禁用按鈕的最佳實現(xiàn)方法
在項目開發(fā)中經(jīng)常會遇到這樣的功能，為了防止在Bootstrap中點擊按鈕多次提交，所以希望點擊按鈕后禁用按鈕。怎么實現(xiàn)此功能呢？今天腳本之家小編給大家分享BootStrap中按鈕點擊后被禁用按鈕的最佳實現(xiàn)方法，非常不錯，感興趣的朋友參考下吧2016-09-09
今天遇到一個問題需要獲取tagName，使用jquery，查詢了一下，大家說用$("dd").attr("tagName")能獲取到，但是得到的返回值是undefined，于是又查詢餓了許久，返回遍歷了一下jquery封裝的對象2011-11-11
jQuery操作listbox原理并不難，就是將listbox中的選中項進行移動，實現(xiàn)我們需要的移動效果，具體實例如下，感興趣的朋友可以學習下2013-05-05
這篇文章主要介紹了jQuery基于擴展實現(xiàn)的倒計時效果,涉及jQuery擴展的使用與時間操作的相關(guān)技巧,需要的朋友可以參考下2016-05-05