2013-07-23 4 views
1

Я немного отклеился.Javascript - получение элемента box-shadow детали точно

Хорошо, что у каждого свойства css есть отдельные части IE.

margin-left 
border-top-color 
transition-duration 

Однако, я искал вокруг немного, и это, кажется, ко мне, что это не тот случай с box-shadow. Например я есть 4 <input> «S, то H Spread&V Spread&Blur&Color. и я не хочу менять тень блока элементов при изменении этих полей. Обнаружив, что не существует каких-либо особенности в коробке тени, я решил, что лучше всего было бы разделить box-shadow в Array используя что-то вроде этого

element.style.boxShadow.split(' '); 

Однако результат не возвращается в правом порядок, как показано в этом Fiddle

<div id="test" style="box-shadow: 1px 1px 3px #999;"> Welcome </div> 
console.log(element.style.boxShadow.split(' ')); 

ли в результате этого выхода ["rgb(153,", "153,", "153)", "1px", "1px", "3px"]

цвет отличается и порядок изменился, который звучит не очень reliab мне.

Есть ли способ, мы можем acuratelly получить/установить различные секции box-shadow

Я также использую Zepto.js, если есть решение там.

Я пробовал .css(); = такой же результат.

+0

Есть ли причина, по которой вы бы не просто изменили класс и не создали новый стиль в CSS? – kalley

+0

Да. Я создаю создатель веб-страницы @kalley, у вас есть вклад, который изменит «box-shadow» элемента. – iConnor

+0

http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow – Esailija

ответ

2

Я надеюсь, что это поможет вам приблизиться к вашей цели. Я сделал регулярное выражение, которое соответствует тому, что выводит браузер (rgb - это только hex как rgb). Возможно, потребуется обновить его, поскольку я не тестировал его во всех браузерах, но я думаю, что он преобразует его в rgb, поэтому, если есть альфа, с которым можно легко справиться.

Вот скрипка: http://jsfiddle.net/HQ7NF/2/

А вот регулярное выражение я использую:

var reBoxShadow = /(?:rgb\((\d+), ?(\d+), ?(\d+)\)([^,]*))+/g; 
while (style = reBoxShadow.exex(element.style.boxShadow)) { 
    /* this is where stuff happens */ 
} 

я затем разделить цвет и арг в отдельные переменные, так что вы можете решить, что делать с ними. Надеюсь, это может по крайней мере дать вам правильный путь.

+0

Это очень хорошее решение, спасибо вам большое. – iConnor

 Смежные вопросы

  • Нет связанных вопросов^_^