如何创建一个关键的gui,其中字符+是在字符=的顶部与kbd标签或其他?
+
=
kbd
vmdwslir1#
使用<br />标记按如下方式断开符号
<br />
<kbd>+<br/>=</kbd>
<kbd>+<br />=</kbd>
获取kbd标签的innerHTML,使用JavaScript的split函数和"",然后它将拆分每个字符并组成一个数组。然后将数组与<br />连接,然后将其添加为相同kbd标记的innerHTML
split
""
innerHTML
var kbd=document.getElementsByTagName("kbd")[0]; kbd.innerHTML=kbd.innerHTML.split("").join("<br />");
<kbd>+=</kbd>
在JavaScript中,建议将JavaScript放在关闭</body>标记的正上方。只有它才能找到相应的元素。那是
</body>
<body> <kbd>+=</kbd> <script> var kbd=document.getElementsByTagName("kbd")[0]; kbd.innerHTML=kbd.innerHTML.split("").join("<br />"); </script> </body>
尝试单击按钮,<kbd>将发生变化。
<kbd>
function change(index){ var kbd=document.getElementsByTagName("kbd")[0]; kbd.innerHTML=kbd.innerHTML.split("").join("<br />"); }
<kbd>+=</kbd> <br /> <button onclick="change();">Change(0)</button>
尝试单击按钮,相应的<kbd>将被更改。
function change(index){ var kbd=document.getElementsByTagName("kbd")[index]; kbd.innerHTML=kbd.innerHTML.split("").join("<br />"); }
<kbd>+=</kbd> <br /> <button onclick="change(0);">Change(0)</button> <br /> <kbd>+=</kbd> <br /> <button onclick="change(1);">Change(1)</button> <br /> <kbd>+=</kbd> <br /> <button onclick="change(2);">Change(2)</button> <br /> <kbd>+=</kbd> <br /> <button onclick="change(3);">Change(3)</button>
ne5o7dgx2#
我不得不给予使用纯CSS解决方案。这是HTML,只使用plus-equals类名进行了调整,以便我们可以使用CSS选择器将其单独列出,然后使用一系列CSS样式使其看起来像一个两行加/等于键:
plus-equals
kbd.plus-equals { display: inline-block; background: #FFF; color: #FFF; font-size: 1px; border: 1px solid #999; border-radius: 4px; box-shadow: 1px 2px 3px #999; width: 28px; height: 28px; overflow: visible; } kbd.plus-equals:after { content: "+\0a="; color: #666; display: block; font-size: 16px; text-align: center; line-height: 12px; width: 16px; position: relative; top: 0; left: 6px; }
Please type the <kbd class='plus-equals'>+=</kbd> key.
这是怎么回事?完全作弊!第一组CSS声明隐藏了原始的“+=”内容,方法是将其缩小到几乎没有内容,然后将其呈现为白色背景上的白色。他们还添加了一个漂亮的边框和框阴影,使它看起来像一个键盘键。第二组CSS声明在原始内容之后注入替换内容:替换内容在单独的行上有“+”和“=”,并且经过仔细格式化,以在原始键形矩形的顶部对齐。这是一种很酷的方式,可以将适当的,干净的,语义化的HTML标记变成看起来像期望的结果的东西,而不需要任何JavaScript在事后清理它。
2条答案
按热度按时间vmdwslir1#
纯HTML
使用
<br />
标记按如下方式断开符号标记
输出
=
代码
JavaScript中
如何操作
获取
kbd
标签的innerHTML,使用JavaScript的split
函数和""
,然后它将拆分每个字符并组成一个数组。然后将数组与<br />
连接,然后将其添加为相同kbd
标记的innerHTML
引用
代码
在JavaScript中,建议将JavaScript放在关闭
</body>
标记的正上方。只有它才能找到相应的元素。那是
在JavaScript中,基于事件
尝试单击按钮,
<kbd>
将发生变化。JavaScript解决方案,如果您想更改多个项目。
尝试单击按钮,相应的
<kbd>
将被更改。ne5o7dgx2#
我不得不给予使用纯CSS解决方案。
这是HTML,只使用
plus-equals
类名进行了调整,以便我们可以使用CSS选择器将其单独列出,然后使用一系列CSS样式使其看起来像一个两行加/等于键:这是怎么回事?完全作弊!
第一组CSS声明隐藏了原始的“+=”内容,方法是将其缩小到几乎没有内容,然后将其呈现为白色背景上的白色。他们还添加了一个漂亮的边框和框阴影,使它看起来像一个键盘键。
第二组CSS声明在原始内容之后注入替换内容:替换内容在单独的行上有“+”和“=”,并且经过仔细格式化,以在原始键形矩形的顶部对齐。
这是一种很酷的方式,可以将适当的,干净的,语义化的HTML标记变成看起来像期望的结果的东西,而不需要任何JavaScript在事后清理它。