欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

select下拉框选择字体大小

程序员文章站 2022-07-02 21:14:40
效果: 结合Bootstrap、jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option,随着option:selected选中的字号而改变相应的字体大小 代码: ......

效果:

select下拉框选择字体大小

 

结合bootstrap、jquery和es6字符串模板与箭头函数使用javascript dom操作动态添加option,随着option:selected选中的字号而改变相应的字体大小

代码:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css" />
</head>

<body>

    <div class="col-md-2" style="float: none; margin: 20px auto;">
        <select class="form-control" id="select-font-size"></select>
    </div>

    <p style="width: 600px;margin: 0 auto;text-indent: 2em;">如果需要没有文字,输入框(input)正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。</p>


    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var fontsize = ['12px', '14px', '16px', '18px', '20px', '24px', '36px'];
            for (var i = 0; i < fontsize.length; i++) {
                // es6字符串模板
                var html = `<option>${fontsize[i]}</option>`
                $("#select-font-size").append(html);
                $("#select-font-size option").eq(i).css('font-size', fontsize[i]);
            }
            // es6箭头函数
            $('body').on("change", "#select-font-size", () => {
                var fontcss = $("#select-font-size").find('option:selected').css('font-size');
                $("p").css('font-size', fontcss);
            })
        })
    </script>

</body>

</html>