如何创建一个关键的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在事后清理它。