2013-03-13 66 views
0

我有一個將應用some CSS shadow的div。我需要用jQuery得到以下陰影元素:使用jQuery獲取陰影樣式

  • h-shadowv-shadow,以像素爲單位
  • color陰影的blurspread,在一些字符串,並沒有多麼
  • inset ,如果它應用於box-shadow屬性。

怎麼辦?是否有一些特定的CSS屬性,如border-top-right-radius獲得右上邊框半徑而不是與border-radius一起使用?


因此,示例代碼:

<div id="the_div" style="box-shadow:10px 10px 5px 2px #f00 inset;">...</div> 

現在一些JavaScript ...

$(function(){ 
    $('#the_div').someFunction(); // returns the h-shadow, for example 
}); 
+0

你是什麼意思與「我需要得到....與jQuery」? – caramba 2013-03-13 19:41:06

+0

我想要得到這個值,就像'('selector')。height()'。但不是高度,而是這些屬性。 – Keelan 2013-03-13 19:41:39

+0

粘貼你的代碼 – Biswajit 2013-03-13 19:42:44

回答

2

你想要什麼,是這樣的事情:

jQuery getting text-shadow variabile

基本上,解決方案就是使用一些正則表達式的文字陰影分成coloryxblur

+0

這就是我需要的!我會將我的問題標記爲重複。謝謝你的幫助! – Keelan 2013-03-13 19:51:25

0
jQuery("#divID").css("color"); 

這將讓顏色 - jQuery將得到你要求的CSS屬性:jQuery CSS

+0

對不起,如果我不清楚,我想要的是應用於CSS的'box-shadow'屬性的顏色。 – Keelan 2013-03-13 19:46:48

0
alert($('.myElementClass').css('box-shadow)); 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.xxx { 
    position: relative; 
    background-color: #abc; 
    width: 40px; 
    height: 40px; 
    float: left; 
    margin: 5px; 
    box-shadow: 10px 10px 5px #888888; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<p><button id="go">Run »</button></p> 
<div class="xxx"></div> 
<script> 
    $("#go").click(function(){ 
     alert($('.xxx').css('box-shadow')); 
    }); 
</script> 
</body> 
</html> 
+0

我需要將值分開,所以一個變量用'h-shadow',一個用'v-shadow'等。 – Keelan 2013-03-13 19:48:48

+1

正如我在我的回答中所說的,這是一個簡單的字符串解析練習。你可以用空格字符分割返回的字符串來獲得數組,然後根據CSS的規則,你會知道哪個數組元素對應於哪個屬性。 – 2013-03-13 19:52:15

+0

@FrankB它不那麼容易。看看** NOTE ** [這裏](http://stackoverflow.com/a/2683393/1544337):不同的瀏覽器可能採取不同的行爲。 – Keelan 2013-03-13 19:54:07

0

你需要使用:

$("#divID").css("box-shadow"); 

然後解析返回的字符串爲你想要的屬性。由於字符串可能會有所不同,我不會寫出一個函數。但你應該可以從這裏拿走它。

編輯: 由於不同瀏覽器的行爲不同,你可以從here.

另外你在另一個答案一個以前的評論鏈接到答案檢查使用最多的回答瀏覽器,回答你的問題。它可以發現here

+0

「然後解析......」是的,但是......怎麼......這就是問題所在。 – Keelan 2013-03-13 19:50:29