Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >javascript动态设置select下拉菜单字体大小

javascript动态设置select下拉菜单字体大小

原创
作者头像
IT工作者
发布于 2021-12-28 05:15:01
发布于 2021-12-28 05:15:01
1.6K00
代码可运行
举报
文章被收录于专栏:程序技术知识程序技术知识
运行总次数:0
代码可运行

本章节分享一段极其简单的代码实例,它使用javascript实现了动态设置select下拉菜单字体大小的功能。

代码实例如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>前端</title>
<style type="text/css">
select{
  font-size:12px;
}
</style>
<script>
window.onload = function () {
  var obt = document.getElementById("bt");
  var osel = document.getElementById("sel");
  obt.onclick = function () {
    osel.style.fontSize = "18px";
  }
}
</script>
</head>
<body>
<select id="sel">
  <option>前端部落一</option>
  <option>前端部落二</option>
</select>
<input type="button" value="查看效果" id="bt"/>
</body>
</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
display:none的元素无法获取offsetWidth和offsetHeight
由上面的代码可以看出,antzone元素的offsetheight是无法正确获取的。
IT工作者
2021/12/29
1.8K0
JavaScript入门
2看文字样式 T 单击目标文字,菜单栏下面查看文字效果---释放选择:ctrl + enter或选择其他工具
小闫同学啊
2019/07/18
3.3K0
JavaScript的window.load小记
本文着重介绍注册在window对象上load事件,也就是window.onload事件。
休辞醉倒
2019/07/25
6750
JavaScript学习笔记(一)
wdm,这个寒假越过越长… 寒假在家学习JavaScript的相关知识,写博客作为笔记 我是以清华大学出版社的《JavaScript从入门到项目实践》作为学习用书的
wsuo
2020/07/31
3.4K0
JavaScript学习笔记(一)
一个搜索条样式,包括select的美化
一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona
练小习
2017/12/29
9170
JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示。 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语
谙忆
2021/01/21
1.4K0
JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
javascript获取伪对象before和after定义的内容
(1).::before选择器可以参阅CSS E:before/E::before一章节。
IT工作者
2021/12/28
1.8K0
级联下拉菜单的实现「建议收藏」
相信我们都会选择第一种方法,这样不仅增强了代码的复用性,而且当我们的需求变动,需要显示新的数据时,只要更新数据库就可以了。而第二种方法只能适用于某种情况,需求改变,就需要在代码中进行大量的修改。
全栈程序员站长
2022/08/09
1.3K0
javascript加密简单介绍
这里不介绍javascript加密实现的原理,只是分享一下现有的几个javascript实现的加密方式。
IT工作者
2021/12/28
1.3K0
offsetWidth是否包括滚动条
关于offsetWidth的基本用法可以参阅js offsetWidth一章节。 下面就通过代码实例验证一下offsetWidth是否包括滚动条的宽度。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>前端部落</title> <style> #top,#bottom{ width:200px; height:100px; background:red; overflow:auto; margin:
IT工作者
2021/12/29
3850
下拉菜单11+原生js获取select下拉框的selected的option项
想必大家在开发过程中也遇到类似问题,如果直接将js获取的数组传给后台,后台是无法区分数组的,因为js数组如果是二维的就是这样的:1,张三,23,2,李四,26
用户3519280
2023/07/08
1.4K0
下拉菜单11+原生js获取select下拉框的selected的option项
用jQuery模拟select下拉框
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:)
菩提树下的杨过
2019/09/12
3.8K0
javascript实时显示文本框输入字数
(1).function CountWords(obj, show_id) {},第一个参数是文本框对象,第二个参数是显示字符的id。
IT工作者
2021/12/29
3.7K0
简单粗暴的JavaScript笔记-1
前言: 提示密码提示框 <head> <style> #div1 {width: 100px;height:50px;background:#FFCC99;border:1px solid #FF9900; dispaly: none;} </style> <title>dashucoding</title> </head> <body> // get Element By Id <input type="checkbox" onmouseover="" "doucument.getElemen
达达前端
2019/07/04
8420
动态设置元素的css样式简单介绍
本章节介绍一下如何使用jquery动态设置元素的css样式。 下面就通过代码实例做一下简单介绍。 一.使用css()方法: 使用css可以单独设置一个样式属性,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>前端</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascri
IT工作者
2021/12/28
2.9K0
为什么给offsetWidth和offsetHeight赋值无效
本章节介绍一个在初学者中比较容易出现的问题,给offsetWidth和offsetHeight赋值无效现象。
IT工作者
2021/12/29
1.4K0
修改select下拉菜单样式(input下拉框select)
自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍。
全栈程序员站长
2022/07/28
3.5K0
修改select下拉菜单样式(input下拉框select)
JavaScript-T2
JavaScript-T2 前言 本次主要讲解的知识点是: JavaScript自定义函数 JavaScript系统函数 JavaScript 事件 JavaScript 的常用事件 JavaScript自定义函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
红目香薰
2022/12/05
3340
JavaScript-T2
C# 结合JavaScript实现手写板签名并上传到服务器
我们最近开发了一款笔迹测试功能的程序(测试版),用户在手写板上手写签名,提交后即可测试出被测试者的心理素质评价分析。类似功能的场景还比如,在银行柜台办理业务,期间可能需要您使用手写设备进行签名并确认;保险续期小程序,到期后需要你在确认续期条款后,在手机上提供的签名区域进行签名并提交确认。
初九之潜龙勿用
2024/06/20
2150
C# 结合JavaScript实现手写板签名并上传到服务器
Select multiple多选上移、下移
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/113502.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/07
1K0
相关推荐
display:none的元素无法获取offsetWidth和offsetHeight
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档