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


Posted in Javascript onOctober 17, 2014

JavaScript sub 方法

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

str_object.sub()

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

sub 方法实例

<script language="JavaScript">

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

</script>

运行该例子,输出:

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

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

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

<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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
Javascript玩转继承(二)
May 08 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 #Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 #Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 #Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 #Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 #Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 #Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 #Javascript
You might like
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP脚本的10个技巧(3)
2006/10/09 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php文件缓存方法总结
2016/03/16 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JavaScript模块随意拖动示例代码
2014/05/27 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
JS严格模式知识点总结
2018/02/27 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
对Django url的几种使用方式详解
2019/08/06 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
新闻记者个人求职的自我评价
2013/11/28 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript