CSS box-shadow 属性 - 对各种属性的精细访问答案

【问题标题】：CSS box-shadow properties - granular access to the various propertiesCSS box-shadow 属性 - 对各种属性的精细访问
【发布时间】：2018-05-25 22:47:02
【问题描述】：

有没有办法访问 box-shadow 的单独属性..

例如

我想分别拉出'blur'和'spread'的值，并根据这些值设置一些我拥有的滑块。

有没有办法从简写的 'box-shadow' 属性中访问它们

例如

盒子阴影扩散盒子阴影颜色，

等等。

我不想在节点上存储一堆属性，只是为了跟踪这些值和设置控件。

【问题讨论】：

标签： jquery css box-shadow

【解决方案1】：

只需使用 ole pick_apart 函数：

function pick_apart(img_id) {
    hold_res={}
    ss = $('#' + img_id).css('box-shadow')
    hold_res['color'] = ss.substring(ss.lastIndexOf("r"),ss.lastIndexOf(")")+1);
    hold_res['offset_x'] = ss.split(' ')[3]
    hold_res['offset_y'] = ss.split(' ')[4]
    hold_res['blur_radius'] = ss.split(' ')[5]
    hold_res['spread_radius'] = ss.split(' ')[6]
    return(hold_res)
    }

HTML：

<img id='my_img' src='https://pbs.twimg.com/profile_images/988775660163252226/XpgonN0X_400x400.jpg'>

CSS

img {
  box-shadow: 10px 20px 30px 40px #555;
}

用法：

pick_apart('my_img')

结果：

{
    "color": "rgb(85, 85, 85)",
    "offset_x": "10px",
    "offset_y": "20px",
    "blur_radius": "30px",
    "spread_radius": "40px"
}

【讨论】：

非常感谢。不幸的是，没有更简单的方法可以做到这一点。