0

我知道 jQuery 不能直接操作 CSS 伪元素，而且我已经在这里阅读了一堆没有回答我的问题的帖子。

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

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

我已经掌握了脚本的基础知识，但我无法让它在每次更改时更改字体大小。例如（#base_size 是整数值的字段，a:before 是插入图标的伪元素）：

$('#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”（每次更改一个）带有两个冒号且没有声明。

我可能会以错误的方式处理这一切。我将非常感谢任何帮助！

4

1 回答 1

-1

为什么要使用样式表？

尝试更改 CSS：

$('#base_size').change(function() {
    var baseSize = this.value;
    $('.item a:before').css({ 'font-size': baseSize + 'px' });
});
于 2013-07-15T15:37:52.913 回答