Get every value from a box

 

I'm looking for suggestions for a problem I'm having right now. I want to be able to change programatically the values of a box-shadow ie: box-shadow: h-shadow v-shadow blur spread color inset; .

And my issue is worst, I need it to be at least 2 properties together.

Example output of chrome: box-shadow: rgb(0, 0, 0) 0px 5px 10px, rgb(255, 255, 255) 0px 4px 10px inset;

So my issue is

  • how can I first separate the two styles, just .split(",") wont cut it because it creates an array because of rgb(,,)
  • If I get to split it, how to take care in case of HEX, rgb, or rgba, would a regex suffice?

    • Edit: I have to be able to make this splits in the browser, that's why I'm looiking for a js solution

    Thank you.

    Solution

    Using @BYossarian answer I've added the following to continue the split the different box-shadow values

    string.split(/,(?![^(]*))/);

    and the following to split the white spaces

    string.split(/ (?![^(]*))/);

    outputting

    ["rgb(0, 0, 0)", "0px", "5px", "12px", "0px"]

    The rest is just finding strings

    var box_shadow_properties = box_shadow.split(/ (?![^(]*))/);

    ie: getting the h-shadow v-shadow blur spread properties if(box_shadow_properties[i].indexOf("px") !== -1)

    ie: getting the color property if (box_shadow_properties[i].indexOf("rgb") !== -1 || box_shadow_properties[i].indexOf("#") !== -1)

    Hope someone finds this helpful

    In terms of splitting the string, the only commas should either be within brackets as part of a colour value, or separating the various box-shadow values. Since you want to split along the latter, you need to look for commas which aren't followed by an unopened closing bracket. ie commas that aren't followed by a ')' without a '(' inbetween the comma and the ')'. You can do that using the regex: 

    /,(?![^(]*))/

    So that you'd use:

    string.split(/,(?![^(]*))/);

    Then in terms of identifying the colour values, you might want to start by looking at:

    http://www.w3.org/TR/css3-color/

    Not a regex-based-solution, but worth knowing:

    using LESS you can bind each shadow value to a variable, like this: 

    @a: rgb(0, 0, 0) 0px 5px 10px;
@b: rgb(255, 255, 255) 0px 4px 10px inset;

some_element {
   box-shadow: @a, @b; 
}

    and then modify them at runtime with javascript using LESS built-in function modifyVars() : 

    less.modifyVars({
   '@a': 'rgb(0, 0, 255) 6px 5px 20px'
});
    链接地址: http://www.djcxy.com/p/17244.html

    上一篇: 用C和Java解决数字拼图

    下一篇: 从盒子中获取每个价值