通过JS添加上标

Question

我有一个场景需要为其中一个产品添加上标。假设它是abc9。我需要在 abc 和 9 之间加上上标 R。

为此我需要通过JS拆分单词和数字。我还希望仅当页面高度为 800px 时才显示。

Answer 1

为什么需要使用JavaScript？据我了解，这是一个 content/style 问题，所以 HTML 和 CSS 是你的朋友：

这里的 "correct" 答案实际上取决于上标字母与页面内容的关系。这个字母是上标这个事实是有意思，还是只是文体？每条规则都有其例外情况，但如果给出选择，HTML 应该是语义的，并且有一个 HTML 元素可能与此处相关：

The HTML Superscript Element () defines a span of text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.

如果您的上标表示某种含义，请使用  元素。

如果它只是产品名称的程式化部分，则使用 CSS。使用 CSS 有很多方法，但我个人会像这样使用相对定位：

span.sup {
    position: relative;
    font-size: 0.6em;
    bottom: 0.5em;
}

有关不同上标方法优缺点的更深入讨论，请参阅Superscript in CSS only?

至于让上标文本只在特定的屏幕高度出现，你也不需要 JavaScript 并且实际上使用 CSS media queries:

会更容易

span.sup, sup {
    display: none;
}

@media (min-height: 800px) {
    span.sup, sup {
        display: inline;
    }
}

当浏览器视口的高度 >= 800px 时，媒体查询规则将启动并显示上标文本。

最终，用法只是将  或  应用于标记中已有的字母 "R"：

abcR9

通过JS添加上标

add superscript through JS

javascript

jquery

superscript

responsive-design