Как изменить внутренний цвет box-shadow с помощью jquery или как?

Question

Я хотел бы изменить цвет тени блока в результате значения, которое я получаю из базы данных.

В основном то, что я делаю, это:

if (dbValue==1)
      $('.myDivClass').css("box-shadow","0px 0px 30px #333333");
else
 $('.myDivClass').css("box-shadow","0px 0px 30px #999999");

для поддержки браузера. Я должен установить это значение также для -webkit -moz.

Я думаю этоне поддерживается, и ему также нужно где-то иметь значение inset, чтобы сделать его тенью внутреннего блока.

Я также искал плагины jquery и обнаружил метод boxShadow, который изменяет только внешний цвет тени.Есть ли способ сделать это?Я что-то пропустил.Думаю, я могу создать разные классы css с разными внутренними box-shadow и с помощью jquery я могу добавить и удалить класс в div, чтобы изменить box-shadow.мне кажется, это альтернативный способ сделать это, но я хочу убедиться, что если нет способа изменить цвет

box-shadow: inset 0px 0px 20px #257d0d;

, то это box-shadow напрямую?

Answer 1

Возможно, вам следует просто добавить класс к элементу.

CSS:

.boxShadow {
-webkit-box-shadow: inset 0px 0px 30px #333333;
-moz-box-shadow: inset 0px 0px 30px #333333;
box-shadow: inset 0px 0px 30px #333333;
}
.boxShadow2 {
-webkit-box-shadow: inset 0px 0px 30px #999999;
-moz-box-shadow: inset 0px 0px 30px #999999;
box-shadow: inset 0px 0px 30px #999999;
}

JavaScript:

if (dbValue==1)
      $('.myDivClass').removeClass('boxShadow boxShadow2').addClass('boxShadow');
else
 $('.myDivClass').removeClass('boxShadow boxShadow2').addClass('boxShadow2');

Как вы можете видеть, я сделалвставка тени блока для вас также, если вы хотите, чтобы она была вставкой тени блока.

Надеюсь, это поможет.

Редактировать: Я отредактировал свой код, чтобы удалить каждый класс перед добавлением нового на тот случай, если кто-нибудь когда-нибудь понадобится..

Answer 2

    .boxShadow {
    -webkit-box-shadow: inset 0px 0px 30px rgba(1,2,3,0);
    -moz-box-shadow: inset 0px 0px 30px rgba(1,2,3,0);
    box-shadow: inset 0px 0px 30px rgba(1,2,3,0);
}

$('#m-div').css('box-shadow').replace(/rgba\([1\s]+,[2\s]+,[3\s]+,[0\s]+\)+/g,'red')

я использую reg-ex, потому что в некоторых браузерах один цвет может быть возвращен в другом формате, например, прозрачный возвращается в chrome как rgba (0,0,0,0)