Question

我知道这听起来很傻，你会问我为什么不使用css，我向你保证我有理由。我正在构建一个可供用户配置的应用程序，其中一部分是更改背景颜色。改变背景颜色是没有问题的，但我有一个地方，我正在使用a ::之前的css阴影轻轻地将图像淡入背景。

我的css看起来像这样

-moz-box-shadow:inset 0px 0px 90px 50px rgba(230,235,242,0.98);
-webkit-box-shadow:inset 0px 0px 90px 50px rgba(230,235,242,0.98);
box-shadow:inset 0px 0px 90px 50px rgba(230,235,242,0.98);

为了尝试将其转换为jQuery，我尝试了类似这样的东西

$('.titleImage .shadow::before').css('-webkit-box-shadow', "inset 0px 0px 90px 50px" + Props['BackgroundColor']);

但它不想工作。任何帮助将不胜感激！

Answer 1

jQuery无法定位伪元素（不要求解决方法，也没有解决方法），但您可以在添加/删除/修改伪元素的元素上切换类。

＆＃13;

$('div').on('click',function(){ $(this).toggleClass('pseudo'); });

＆＃13;

div:before {
  content:"Hi";
  border: 1px solid #000;
  }

div.pseudo:before { border-width: 3px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  </div>

＆＃13;

Answer 2

伪选择器无法使用jquery进行选择。解决方法是使用内联css，如下所示：

$('.titleImage .shadow').append('<style> .titleImage .shadow::before {-moz-box-shadow:inset 0px 0px 90px 50px rgba(230,235,242,0.98); -webkit-box-shadow:inset 0px 0px 90px 50px rgba(230,235,242,0.98);box-shadow:inset 0px 0px 90px 50px rgba(230,235,242,0.98);}</style>');

如果需要，您也可以删除该样式

Answer 3

向dom添加元素，例如：

<style id="mySpecialStyles"></style>

功能如：

function changeColor(newColor){
    $('#mySpecialStyles').text(
        '.titleImage .shadow::before{' + 
        '-webkit-box-shadow:inset 0px 0px 90px 50px '+ newColor +';' +   
        'box-shadow:inset 0px 0px 90px 50px '+ newColor +';}'
    )    
}

// called like
changeColor('#000000');

将其保存为您更改的单个样式标记。

结帐this demo fiddle。

HTH

使用jQuery将css :: before添加到元素中

3 个答案: