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 相关文章推荐
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
vue axios用法教程详解
Jul 23 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
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
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
node.js实现快速截图
2016/08/27 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
详解redux异步操作实践
2018/08/15 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
详解pandas映射与数据转换
2021/01/22 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
什么是测试驱动开发(TDD)
2012/02/15 面试题
大学生职业生涯规划书模板
2014/01/18 职场文书
网络研修随笔感言
2014/02/17 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS