css 如何使用kbd标签创建=和+键?

qltillow  于 2023-05-19  发布在  其他
关注(0)|答案(2)|浏览(180)
  • 或+=无法创建以下键。
    [

如何创建一个关键的gui,其中字符+是在字符=的顶部与kbd标签或其他?

vmdwslir

vmdwslir1#

纯HTML

使用<br />标记按如下方式断开符号

标记

<kbd>+<br/>=</kbd>

输出

=

代码

<kbd>+<br />=</kbd>

JavaScript中

如何操作

获取kbd标签的innerHTML,使用JavaScript的split函数和"",然后它将拆分每个字符并组成一个数组。然后将数组与<br />连接,然后将其添加为相同kbd标记的innerHTML

引用

  1. String.prototype.split
  2. Array.prototype.join
  3. element.innerHTML

代码

var kbd=document.getElementsByTagName("kbd")[0];
kbd.innerHTML=kbd.innerHTML.split("").join("<br />");
<kbd>+=</kbd>

在JavaScript中,建议将JavaScript放在关闭</body>标记的正上方。只有它才能找到相应的元素。
那是

<body>
  <kbd>+=</kbd>
  <script>
      var kbd=document.getElementsByTagName("kbd")[0];
      kbd.innerHTML=kbd.innerHTML.split("").join("<br />");
  </script>
</body>

在JavaScript中,基于事件

尝试单击按钮,<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>

JavaScript解决方案,如果您想更改多个项目。

尝试单击按钮,相应的<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>
ne5o7dgx

ne5o7dgx2#

我不得不给予使用纯CSS解决方案。
这是HTML,只使用plus-equals类名进行了调整,以便我们可以使用CSS选择器将其单独列出,然后使用一系列CSS样式使其看起来像一个两行加/等于键:

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在事后清理它。

相关问题