JavaScript sup方法入门实例(把字符串显示为上标)


Posted in Javascript onOctober 20, 2014

sup 方法返回使用 HTML sup 标签属性定义的上标字符串。其语法如下:

str_object.sup()

提示:该方法不符合 ECMA 标准,不建议使用。

sup 方法实例:

<script language="JavaScript">

document.write( '三水点靠木' + '每一点进步,都是我们通往成功道路上的坚实脚印'.sup() );

</script>

运行该例子,输出:

三水点靠木每一点进步,都是我们通往成功道路上的坚实脚印

提示:该方法返回使用 HTML sup 标签定义的上标字符串,即使用该方法并不能直接将字符串变更为上标样式。如果想动态改变元素字体为上标样式,可参考下面的实例:

改变字体文本上下对齐方式(上标/下标)

<html>
<script language="JavaScript">
function changFont( x ){

    document.getElementById("sub_title").style.verticalAlign = x;

}
</script>
<body>

<p>

<a onClick="changFont('sub');">下标样式</a> <a onClick="changFont('super');">上标样式</a>

</p>

<p>

三水点靠木<span id="sub_title">每一点进步,都是我们通往成功道路上的坚实脚印</span>

</p>

</body>

</html>

在该例子中,通过 JavaScript 控制文本 CSS vertical-align 样式的方式,来动态改变字体文本的上下对齐方式(上标/下标)。

Javascript 相关文章推荐
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 #Javascript
js添加select下默认的option的value和text的方法
Oct 19 #Javascript
使用变量动态设置js的属性名
Oct 19 #Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 #Javascript
js读取json的两种常用方法示例介绍
Oct 19 #Javascript
Jquery解析Json格式数据过程代码
Oct 17 #Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 #Javascript
You might like
php代码审计比较有意思的例子
2014/05/07 PHP
thinkphp分页集成实例
2017/07/24 PHP
jquery tools之tooltip
2009/07/25 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
es6函数之尾递归用法实例分析
2020/04/25 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python查找第k小元素代码分享
2013/12/18 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python3实现定时任务的四种方式
2019/06/03 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
区分python中的进程与线程
2020/08/13 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
2014大学生全国两会学习心得体会
2014/03/13 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
2014年公务员工作总结
2014/11/18 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
javascript函数式编程基础
2021/09/15 Javascript
Python实现滑雪小游戏
2021/09/25 Python