使用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到一個元素

回答

相關問題