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

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 样式的方式，来动态改变字体文本的上下对齐方式（上标/下标）。

赞 (0)

相关推荐

  • JsRender for object语法简介

    本文简要讲述了JsRender for object的基本语法.分享给大家供大家参考.具体如下:   JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和{{for Object}}都是允许的,{{for Array}}大家都能理解,就是遍历一个数组,逐个取出每个元素.但{{for Object}}就有点让人匪夷所思了,而且官方文档只是举了个没什么帮

  • ejs v9 javascript模板系统

    ejs v9 javascript模板系统

    本版本就是改回v6的形态,后端数据还是带@前端才方便查看与调试.昨天也与一TX前端工程师讨论过这个必要性.取得模板中的需要填写的变量,再与后端传过来的JSON进行比较,尽早进行数据验证.这种技术,可以看一看PHP的变量命名就知了,带是带$前缀. 在之前的版本中,如果输出语句带分号或逗号是会报错的 复制代码 代码如下: <script type="tmpl" id="table_tmpl"> <table> <& for(var

  • JavaScript sub方法入门实例（把字符串显示为下标）

    JavaScript sub 方法 sub 方法返回使用 HTML sub 标签属性定义的下标字符串.其语法如下: 复制代码 代码如下: str_object.sub() 提示:该方法不符合 ECMA 标准,不建议使用. sub 方法实例 复制代码 代码如下: <script language="JavaScript"> document.write( '我们' + '每一点进步,都是我们通往成功道路上的坚实脚印'.sub() ); </script> 运行该例

  • JavaScript bold方法入门实例（把指定文字显示为粗体）

    JavaScript bold 方法 lastIndexOf 方法返回使用 HTML b 标签定义的粗体字符串.其语法如下: 复制代码 代码如下: str_object.bold() 提示:该方法不符合 ECMA 标准,不建议使用. bold 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "www.jb51.net"; document.write(str.bold()); </s

  • JavaScript italics方法入门实例（把字符串显示为斜体）

    JavaScript italics 方法 italics 方法返回使用 HTML i 标签属性定义的(斜体)字符串.其语法如下: 复制代码 代码如下: str_object.italics() 提示:该方法不符合 ECMA 标准,不建议使用. italics 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "www.jb51.net"; document.write( str.itali

  • JavaScript strike方法入门实例（给字符串加上删除线）

    JavaScript strike 方法 strike 方法返回使用 HTML strike 标签属性定义的删除线样式的字符串.其语法如下: 复制代码 代码如下: str_object.strike() 提示:该方法不符合 ECMA 标准,不建议使用. strike 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "www.jb51.net"; document.write( str.st

  • JsRender for index循环索引用法详解

    本文实例讲述了JsRender for index循环索引用.分享给大家供大家参考.具体分析如下: JsRedner和JsViews(JsViews是再JsRender基础上的进一步封装)被称为下一代的Jquery模板,官方地址: https://github.com/BorisMoore/jsrender; https://github.com/BorisMoore/jsviews. 循环是模版引擎必不可少的一部分,而说起循环,会引出一个至关重要的因素:索引. 所谓索引,即循环次数,通过索引,

  • javascript轻量级模板引擎juicer使用指南

    使用方法 编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju

  • laytpl 精致巧妙的JavaScript模板引擎

    laytpl 精致巧妙的JavaScript模板引擎

    laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还

  • JavaScript fontsize方法入门实例（按照指定的尺寸来显示字符串）

    JavaScript fontsize 方法 fontsize 方法返回使用 HTML font 标签中 size 属性定义字体大小的字符串.其语法如下: 复制代码 代码如下: str_object.fontsize( size ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) size 必需.1 到 7 的数字,数字越大字体越大,字体大小对比如下: 1:10px 2:14px 3:16px 4:18px 5:24px 6:32px 7:48px 提示:该方法不符合 EC

  • JavaScript fontcolor方法入门实例（按照指定的颜色来显示字符串）

    JavaScript fontcolor 方法 fontcolor 方法返回使用 HTML font 标签中 color 属性定义的带有颜色的字符串.其语法如下: 复制代码 代码如下: str_object.fontcolor( color ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) color 必需.颜色名(red).RGB 值(rgb(255,0,0))或者十六进制数(#FF0000) 提示:该方法不符合 ECMA 标准,不建议使用. fontcolor 方法实

  • JsRender实用入门教程

    本文是一篇JsRender的实用入门教程,实例讲述了tag else使用.循环嵌套访问父级数据等知识点.分享给大家供大家参考.具体如下: 前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传... 由于工作需要,小菜才接触到此款模版引擎.使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解. 另一方面,

  • JavaScript link方法入门实例（给字符串加上超链接）

    link 方法返回使用 HTML a 标签属性定义的(斜体)字符串.其语法如下: 复制代码 代码如下: str_object.link( url ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) url 必需.字符串要链接的 URL 地址,完整格式. 提示:该方法不符合 ECMA 标准,不建议使用. link 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "www.jb51

随机推荐