使用jQuery/JS從字段值修改僞元素？

我知道jQuery不能直接操作CSS僞元素，而且我已經閱讀了一堆帖子，這些帖子不回答我的問題。使用jQuery/JS從字段值修改僞元素？

我需要用一個字段的值來修改僞元素的CSS。

我的項目有一個圖標顯示在文本之前使用：之前。我需要該圖標的字體大小隨用戶更改字段中的值而動態更改。

我有腳本的基礎知識，但我不能讓它改變每次更改的字體大小。例如（#base_size是具有整數值，一個字段：前是已經插入圖標僞元素）：

$('#base_size').change(function() { 
    var baseSize = $(this).attr('value'); 
    document.styleSheets[0].insertRule('.item a:before { font-size:' + baseSize + 'px !important; }'); 
});

此特定jQuery將改變字體大小，但僅在第一次。 #base_size中的進一步更改不會影響僞元素，但每次更改都會創建新的CSS規則。奇怪的是，Chrome開發工具顯示「.item a :: before」（每個更改一個），帶有兩個冒號並且沒有聲明。

我可能會用這種錯誤的方式去做。我會非常感謝任何幫助！

來源

2013-07-15 Daniel J. Lewis

在CSS3，單結腸被保留用於僞類，如'：active'和'：visited'。雙冒號用於':: before'和':: after'等僞造元素。兩個CSS2都使用了一個冒號。 – mwcz

爲什麼插入規則添加樣式表而不是使用內聯樣式？ – Pieter

[使用jQuery操作CSS僞元素（例如：之前和之後）]的可能重複（http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-eg-before-之後） – Blazemonger

-1

爲什麼選擇樣式表？

嘗試改變CSS代替：

$('#base_size').change(function() { 
    var baseSize = this.value; 
    $('.item a:before').css({ 'font-size': baseSize + 'px' }); 
});

來源

2013-07-15 15:37:52 Neal

您不能根據僞元素進行選擇。這會返回一個空的結果[]。 –

使用jQuery/JS從字段值修改僞元素？

回答

相關問題