使用 jQuery 获取阴影样式 [重复]答案

【问题标题】：Get shadow style with jQuery [duplicate]使用 jQuery 获取阴影样式 [重复]
【发布时间】：2013-03-13 19:38:43
【问题描述】：

我有一个将应用some CSS shadow 的 div。我需要使用 jQuery 获取以下阴影元素：

h-shadow、v-shadow、blur 和 spread（以像素为单位）
影子的color，在某些字符串中，不管怎样
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
});

【问题讨论】：

“我需要用 jQuery 获取....”是什么意思？
我想获得价值，就像$('selector').height()一样。但不是高度，而是这些属性。
问题是我还没有，但是我为你添加了一些带有 div 的示例代码。

标签： jquery css

【解决方案1】：

你想要的，是这种东西：

jQuery getting text-shadow variabile

基本上，解决方案只是使用一些正则表达式将文本阴影拆分为color、y、x 和blur。

【讨论】：

这就是我所需要的！我会将我的问题标记为重复。感谢您的帮助！

【解决方案2】：

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

这将获得颜色 - jQuery 将获得您要求的 css 属性：jQuery CSS

【讨论】：

对不起，如果我不清楚，我想要的是应用于 CSS 的 box-shadow 属性的颜色。

【解决方案3】：

你需要使用：

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

然后解析返回的字符串以获得所需的属性。由于字符串可能会有所不同，我不打算写出一个函数。但是你应该可以从这里拿走它。

编辑：由于不同的浏览器行为不同，您可以使用来自here.的最佳答案来检查浏览器

您在之前对另一个答案的评论中链接到的答案也回答了您的问题。可以找到here

【讨论】：

“然后解析...”是的，但是如何...这正是问题所在。

【解决方案4】：

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>

【讨论】：

我需要将值分开，所以一个变量带有h-shadow，一个带有v-shadow，等等
正如我在回答中所说，这是一个简单的字符串解析练习。你可以将返回的字符串用空格字符分割得到一个数组，然后根据 CSS 的规则你会知道哪个数组元素对应哪个属性。
@FrankB 没那么容易。查看注意 here：不同的浏览器可能会有不同的行为。
@CamilStaps 您刚刚在此处显示的链接，看起来是正确的答案。（抱歉，伯尼没有看到你发布这个。）我不能做得更好。您是否已经尝试（注意）并检查 IE、Opera 和 Safari 返回的内容？
欢迎来到网页设计。在用户使用哪个浏览器的功能测试中，然后根据该结果解析字符串。请参阅here 了解如何测试用户代理。然后使用您向我展示的答案中的代码并对其进行调整以适应情况。