字体大小不随选择/下拉框而变化

font size not changing with select/ dropdown box

本文关键字：变化 选择 字体      更新时间：2023-09-26

我有一个简单的<select>下拉框，具有不同的字体大小，因此我试图用id="textDiv"更改div中某些文本的字体大小。但它并没有真正起作用。我以前从未使用过元素，所以请帮帮我。

HTML

<select name="fontSize" size="1" id="sizeSelector">
    <option value="" selected> 12px </option>
    <option value="1"> 14px </option>
    <option value="2"> 16px </option>
    <option value="3"> 20px </option>
    <option value="4"> 24px </option>
    <option value="5"> 28px </option>
    <option value="6"> 34px </option>
    <option value="7"> 40px </option>
    <option value="8"> 46px </option>
    <option value="9"> 44px </option>
    <option value="10"> 66px </option>
    <option value="11"> 88px </option>
</select>

Jquery

$('select').change(function(){
    var size = $(':selected').val();
    $('#textDiv').css('font-size', size);
});

我确信Jquery逻辑有问题。感谢

您将获得页面中与:selected匹配的所有元素，因此，如果在此之前有任何其他下拉列表，您将首先从中获得所选选项。您可以使用this作为上下文来限制当前下拉列表中的搜索。

您使用val方法从选项中获取值，但该选项不是表单字段，因此您将使用attr方法获取value属性：

var size = $(':selected', this).attr('value');

然而，从select中获取值更容易：

var size = $(this).val();

您可以使选项中的值与大小相对应，但如果这不可能，则需要使用选项的文本并忽略值：

var size = $(':selected', this).text();

如果您制作一个简单的console.log(size)，您会注意到您选择的是选项的值，而不是其文本。您需要这样做来选择文本：

var size = $(':selected').text();

这个

$('select').change(function(){
    var size = $(this).val();
    $('#textDiv').css('font-size', size+'px');
});
相关文章：