使用jQuery/JS修改字段值中的伪元素

Modify pseudo element from field value with jQuery/JS?

本文关键字：元素 字段 jQuery JS 修改 使用      更新时间：2023-09-26

我知道jQuery不能直接操作CSS伪元素，我已经在这里读到了很多不回答我问题的帖子。

我需要用字段的值修改伪元素的CSS。

我的项目在文本之前显示了一个图标，使用：before。我需要图标的字体大小随着用户更改字段中的值而动态更改。

我已经记下了脚本的基本内容，但我就是无法每次更改字体大小。例如（#base_size是具有整数值的字段，a:fore是插入图标的伪元素）：

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

这个特殊的jQuery将更改字体大小，但这只是第一次。#base_size中的进一步更改不会影响pseudo元素，但每次更改都会创建一个新的CSS规则。奇怪的是，Chrome开发工具显示".itema:：before"（每个更改一个），其中有两个冒号，没有声明。

我可能完全搞错了。我将非常感谢任何帮助！

为什么要使用样式表？

尝试更改CSS：

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