求助：使用jQuery通过Range滑块动态修改CSS属性失效

我帮你找出了代码无法动态修改CSS的核心问题，还有一些小细节可以优化：

核心问题：缺少CSS单位 #

你当前给font-size赋值的是纯数字（比如滑块的20），但CSS的font-size属性必须带单位（如px、em），浏览器无法识别无单位的数值作为字体大小，所以修改效果不生效。

额外优化点 #

你的函数定义里有第三个参数id，但调用时传入的"33"并没有被使用，要么可以删除这个冗余参数，要么可以把它改成单位参数来增加灵活性。

修正后的代码（基础版） #

HTML部分

<input type="range" class="prinz-rs__range" name="rangeInputName" value="20" min="10" max="100" oninput='dynamicDisplayChange(this, "head_1");' /> 
<h3 data-id="focused_post_font_size_phsm2">hello there</h3>

JavaScript部分

function dynamicDisplayChange(elem, target){ 
  if( 'head_1' == target ){
    // 给数值添加px单位，让浏览器能正确识别
    $('h3[data-id="focused_post_font_size_phsm2"]').css('font-size', `${elem.value}px`); 
  } 
}

进阶版（支持自定义单位） #

如果需要灵活切换单位（比如em、rem），可以利用第三个参数传递单位：

HTML部分

<input type="range" class="prinz-rs__range" name="rangeInputName" value="20" min="10" max="100" oninput='dynamicDisplayChange(this, "head_1", "px");' /> 
<h3 data-id="focused_post_font_size_phsm2">hello there</h3>

JavaScript部分

function dynamicDisplayChange(elem, target, unit){ 
  if( 'head_1' == target ){
    $('h3[data-id="focused_post_font_size_phsm2"]').css('font-size', `${elem.value}${unit}`); 
  } 
}

这样修改后，拖动滑块时就能看到h3标签的字体大小实时变化了。

内容的提问来源于stack exchange，提问作者Alex Garret jones