使用jQuery添加一个css :: before到一个元素

我知道这听起来很愚蠢，你会问为什么我只是不使用CSS，我向你保证我有一个理由。我正在构建一个可配置给用户的应用程序，其中一部分正在改变背景颜色。改变背景颜色是没有问题的，但是我有一个地方，我使用::之前的css阴影将图像轻轻地褪色到背景中。使用jQuery添加一个css :: before到一个元素

我的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']);

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

来源

2015-04-02 zazvorniki

http://pankajparashar.com/posts/modify-pseudo-elements-css/ – Martijn 2015-04-02 18:30:00

因为CSS是JS之前加载页面，它们存储在文档对象。如果您的js无法工作，则样式表尚未加载。您需要注入加载的样式表值。转储您的document.styleSheets，您会看到所有文档的样式表可以通过注入来更改 – daremachine 2015-04-02 18:37:46

jQuery不能针对伪元素（不要求解决方法，不存在一个），但是您可以在添加/删除/修改伪元素的元素上切换类。

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

div:before { 
 
    content:"Hi"; 
 
    border: 1px solid #000; 
 
    } 
 

 
div.pseudo:before { border-width: 3px; }

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

来源

2015-04-02 18:30:21 Adam

虽然我需要能够更改阴影的颜色，但这是我的问题。不要关闭和打开。 – zazvorniki 2015-04-02 18:32:51

@zazvorniki - 它只是CSS，让它做你想做的任何事情。关键是，你必须使用一个类，**不能直接用jQuery修改伪元素**。 – Adam 2015-04-02 18:33:32

不幸的是，@zazvorniki，你的问题不能使jQuery，甚至是JavaScript，变得能够实现不可能。 – 2015-04-02 18:33:51

伪选择器不能选择使用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>');

您可以删除的风格，以及如果需要的话

来源

2015-04-02 18:37:57 Samir

我不知道这种方法的维护质量如何..：P – LcSalazar 2015-04-02 18:40:03

这是一个工作:) – Samir 2015-04-02 18:41:23

的元素添加到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

来源

2015-04-02 18:41:34 Ted

使用jQuery添加一个css :: before到一个元素

回答

相关问题