效果:
结合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>
内容来源于网络如有侵权请私信删除
- 还没有人评论,欢迎说说您的想法!