7

我正在为我现在遇到的问题寻找建议。我希望能够以编程方式更改 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;

所以我的问题是

  1. 我怎样才能首先将两种样式分开，只是.split(",")不会剪切它，因为它会因为 rgb(,,) 而创建一个数组
  2. 如果我要拆分它，在 HEX、rgb 或 rgba 的情况下如何处理，正则表达式就足够了吗？

编辑：我必须能够在浏览器中进行拆分，这就是我寻找 js 解决方案的原因

谢谢你。

解决方案

使用@BYossarian 的答案，我添加了以下内容以继续拆分不同的 box-shadow 值

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

和以下分割空白

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

输出

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

剩下的就是寻找字符串

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

即：获取 h-shadow v-shadow 模糊扩展属性 if(box_shadow_properties[i].indexOf("px") !== -1)

即：获取颜色属性 if (box_shadow_properties[i].indexOf("rgb") !== -1 || box_shadow_properties[i].indexOf("#") !== -1)

希望有人觉得这有帮助

4

2 回答 2

4

在拆分字符串方面，唯一的逗号应该放在括号内作为颜色值的一部分，或者分隔各种 box-shadow 值。由于您想沿后者拆分，因此您需要查找后面没有未打开的右括号的逗号。即逗号后面没有')'，逗号和')'之间没有'('。您可以使用正则表达式来做到这一点：

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

这样你就可以使用：

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

然后在识别颜色值方面，您可能希望从查看以下内容开始：

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

于 2013-11-13T01:43:06.783 回答
-1

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

使用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 内置函数在运行时使用 javascript 修改它们modifyVars()：

less.modifyVars({
   '@a': 'rgb(0, 0, 255) 6px 5px 20px'
});
于 2013-11-13T00:54:12.880 回答