0

I have a div to which some CSS shadow will be applied. I need to get the following shadow elements with jQuery:

  • h-shadow, v-shadow, blur and spread in pixels
  • The color of the shadow, in some string, doesn't matter how
  • inset, if it is applied in the box-shadow property.

How to do it? Are there some specific CSS properties, like border-top-right-radius to get the top right border radius instead of working with border-radius?

So, example code:

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

Now some JavaScript...

$(function(){
    $('#the_div').someFunction(); // returns the h-shadow, for example
});
  • what do you mean with "I need to get....with jQuery"? – caramba Mar 13 '13 at 19:41
  • I want to get the value, just like with `$('selector').height()`. But then not the height, but these properties. –  Mar 13 '13 at 19:41
  • The problem is I don't have any yet, but I added some example code with a div for you. –  Mar 13 '13 at 19:44

4 Answers4

2

What you want, is this kind of thing:

jQuery getting text-shadow variabile

Basically, the solutions is just to use some regex to split the text shadow into color, y, x, and blur.

Community
  • 1
  • 1
Bernie
  • 1,489
  • 1
  • 16
  • 27
  • That's what I needed! I'll mark my question as a duplicate. Thanks for your help! –  Mar 13 '13 at 19:51
0
jQuery("#divID").css("color");

That will get the color - jQuery will get the css property you ask for: jQuery CSS

Nicholaus Chipping
  • 324
  • 2
  • 13
  • Sorry if I wasn't clear, what I want is the color of that is applied to CSS's `box-shadow` property. –  Mar 13 '13 at 19:46
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>
Matt
  • 74,352
  • 26
  • 153
  • 180
caramba
  • 21,963
  • 19
  • 86
  • 127
  • I need to get the values separated, so one variable with the `h-shadow`, one with the `v-shadow`, etc. –  Mar 13 '13 at 19:48
  • 1
    As I said in my answer, this is a simple string parsing exercise. You can split the returned string with a space character to get an array, then based off the rules of CSS you'll know which array element corresponds to which property. – Frank B Mar 13 '13 at 19:52
  • @FrankB it isn't as easy as that. Look at the **NOTE** [here](http://stackoverflow.com/a/2683393/1544337): different browsers may act differently. –  Mar 13 '13 at 19:54
  • @CamilStaps the link you just showed here, looks like the right answer. (Sorry Bernie haven't seen you posting that.) I could not do it any better. did you already try (the NOTE) and check what IE, Opera and Safari are returning? – caramba Mar 13 '13 at 19:59
  • Welcome to web design. In your function test for which browser the user is using, then base your parsing of the string on that result. See [here](http://stackoverflow.com/questions/10257810/javascript-check-browser) for how to test for the user agent. Then use the code in the answer you showed me and adjust it to fit the situation. – Frank B Mar 13 '13 at 19:59
  • @caramba I made [this fiddle](http://jsfiddle.net/FY6Ap/1/) to test, but I don't have IE9. IE-low gives an `undefined`. FF, GC, Opera and Safari all return the same: `color h-shadow v-shadow blur spread`. Can someone else test IE9+? –  Mar 13 '13 at 20:12
  • @CamilStaps, everyone helping you here for nothing is not rude! everything he mentioned with his comment is that we're not going to do your work. your fiddle has no regex from all the answers. if you put the parts together from all those answers you got here, you have it. you have it all on the plate, now you just have to eat and if you don't like vegetables always tell your self that they're good for you. – caramba Mar 13 '13 at 20:53
0

You'll need to use:

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

Then parse the returned string for the properties you want. Since the string may vary I'm not going to write out a function. But you should be able to take it from here.

EDIT: Because different browsers behave differently you can check for the browser using the top answer from here.

Also the answer you linked to in a previous comment on another answer, answers your question. It can be found here

Community
  • 1
  • 1
Frank B
  • 661
  • 1
  • 9
  • 20