从盒子中获取每个价值

2018-06-05 10:33:19

我正在寻找我现在遇到的问题的建议。我希望能够通过编程方式改变box-shadow的值，即： box-shadow: h-shadow v-shadow blur spread color inset; 。

而我的问题是最糟糕的，我需要它至少有两个属性在一起。

chrome的示例输出： box-shadow: rgb(0, 0, 0) 0px 5px 10px, rgb(255, 255, 255) 0px 4px 10px inset;

所以我的问题是

我怎样才能首先分开这两种风格，只是.split(",")不会因为它创建一个数组而导致rgb（,,）

如果我要分割它，如果在HEX，rgb或rgba的情况下如何照顾，那么正则表达式就足够了？

编辑：我必须能够在浏览器中进行分割，这就是为什么我需要一个js解决方案

谢谢。

解

使用@BYossarian答案我已经添加了以下内容来继续拆分不同的盒子阴影值

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

和以下内容来分割空白处

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

输出

[“rgb（0，0，0）”，“0px”，“5px”，“12px”，“0px”]

其余的只是找到字符串

var box_shadow_properties = box_shadow.split（/（？！[^（] *））/）;

即：如果（box_shadow_properties [i] .indexOf（“px”）！== -1）获得h-shadow v-shadow模糊传播属性，

即：获取颜色属性if（box_shadow_properties [i] .indexOf（“rgb”）！== -1 || box_shadow_properties [i] .indexOf（“＃”）！== -1）

希望有人认为这有帮助

在分割字符串方面，唯一的逗号应该在括号内作为颜色值的一部分，或者分开不同的方块阴影值。既然你想沿着后者分割，你需要查找未被打开的右括号后面的逗号。即，没有'（'在逗号和'）'之间没有'''的逗号。你可以使用正则表达式来做到这一点：

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

所以你会使用：

string.split（/（[^（*））/？！）;

然后，在识别颜色值方面，您可能需要先看一下：

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

不是基于正则表达式的解决方案，但值得了解：

使用LESS，您可以将每个阴影值绑定到变量，如下所示：

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

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

然后使用LESS内置函数modifyVars()在运行时使用javascript修改它们：

less.modifyVars({
   '@a': 'rgb(0, 0, 255) 6px 5px 20px'
});

链接地址: http://www.djcxy.com/p/17243.html