CSS box-shadow свойства - детальный доступ к различным свойствам - PullRequest
Новая
       20

CSS box-shadow свойства - детальный доступ к различным свойствам

0 голосов
/ 26 мая 2018

Есть ли способ получить доступ к отдельным свойствам для box-shadow ..

например,

Я хочу вытащить значения 'blur' и 'spread' по отдельности и установитьнекоторые ползунки, которые я основал на этих значениях.

Есть ли какой-то способ получить к ним доступ с помощью свойства стенограммы 'box-shadow'

например,

box-shadow-spread box-shadow-color,

и т. д.

Я не хочу хранить набор атрибутов на узле, просто чтобы отслеживать эти значения и настраивать элементы управления.

1 Ответ

0 голосов
/ 26 мая 2018

Просто используйте функцию 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'>

enter image description here

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"
}
...