html 下拉框字体,select下拉框选择字体大小

效果：

结合Bootstrap、jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option，随着option:selected选中的字号而改变相应的字体大小

代码:

如果需要没有文字，输入框(input)正是你所期望的。目前只适用于非内联的 checkbox 和 radio。

$(function() {

var fontSize = [‘12px‘, ‘14px‘, ‘16px‘, ‘18px‘, ‘20px‘, ‘24px‘, ‘36px‘];

for (var i = 0; i < fontSize.length; i++) {

// ES6字符串模板

var Html = `${fontSize[i]}`

$("#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);

})

html 下拉框字体,select下拉框选择字体大小相关推荐

html下拉菜单换背景颜色,无下拉箭头的Select下拉框实现更换背景颜色
无下拉箭头的Select下拉框实现更换背景颜色_网页代码站(www.webdm.cn) 徹底無下拉箭頭的Select選框支持IE-Firefox-Chrome for (i=1; i<13; i ...
vue如何取消下拉框按回车自动下拉_Web自动化测试 | Select下拉框
简介在web自动化测试中,经常会遇到下拉框,对列出的选项进行选择,或者判断选择的选项,本文将介绍如何使用Selenium去操作下拉框,实现自动化测试. 测试页面测试URL:http://sahit ...
html 下拉框只读属性,Select下拉框的只读属性设置
今天在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: 情况:根据取得的值去选定select下拉框的选项. 引一个jquery.CSS:body{m ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
CAD更改没有的字体，打开时如何选择字体
如何解决CAD打开时字体选择问题 1.简单方式一:如果有这种字体,直接添加进autocad安装目录下的fonts文件夹中: 简单方式二:如果没有这种字体,打开文件后,点击格式,选择文字样式,将该 ...
html 修改下拉框样式,select下拉框option的样式修改
select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式筛选实验类型实验1 实验2 css: .option{ /*用d ...
如何实现自定义下拉组件，select下拉框样式自定义，带搜索的select下拉框
1.实现的效果 2.实现说明 3.完整代码一.实现的效果: 二.实现说明: 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框: inp ...
c mvc ajax 返回下拉框,SpringMVC之ajax+select下拉框交互常用方式
Insert title here //ajax+select三种常用交互方式 window.οnlοad=function(){ test(); } function test(){ alert(& ...
html 中英文字体自动,用ASP实现中英文字体的自动选择-ASP教程,ASP应用
用asp实现中英文字体的自动选择在windows系统中,每一种语言的字符的显示都有对应的默认字体,例如在大部分的应用程序中,简体中文(gb2312)字符默认的显示字体是"宋体", ...

html 下拉框字体,select下拉框选择字体大小

html 下拉框字体,select下拉框选择字体大小相关推荐

最新文章

热门文章