Question

+ 或 + = 无法创建以下密钥。

[ to put + at the top of = [1]

如何使用+标记或其他内容创建字符=位于字符kbd顶部的键gui？

Answer 1

在纯HTML中

使用<br />标记打破符号如下

标记

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

输出

+ =

代码

＆＃13;

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

＆＃13;

在JavaScript中

如何做到这一点

获取kbd代码的innerHTML，将JavaScript split函数与""一起使用，然后分割每个字符并创建一个数组。然后使用<br />加入数组，然后将其添加为相同innerHTML标记的kbd

参考

String.prototype.split
Array.prototype.join
element.innerHTML

代码

＆＃13;

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

＆＃13;

<kbd>+=</kbd>

＆＃13;

在JavaScript中，建议将JavaScript放在结束</body>标记之上。然后只有它才能找到相应的元素。

那是

＆＃13;

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

＆＃13;

在JavaScript中，基于事件

尝试点击按钮，<kbd>将会改变。

＆＃13;

function change(index){
  var kbd=document.getElementsByTagName("kbd")[0];
  kbd.innerHTML=kbd.innerHTML.split("").join("<br />");
}

＆＃13;

<kbd>+=</kbd>
<br />
<button onclick="change();">Change(0)</button>

＆＃13;

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

尝试点击该按钮，相应的<kbd>将会更改。

＆＃13;

function change(index){
  var kbd=document.getElementsByTagName("kbd")[index];
  kbd.innerHTML=kbd.innerHTML.split("").join("<br />");
}

＆＃13;

<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>

＆＃13;

Answer 2

我不得不尝试使用纯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声明在原始内容之后注入替换内容：替换内容在单独的行上具有“+”和“=”，并且经过精心格式化以排列在原始键形矩形的顶部。 / p>

将一个看起来像所需结果的正确，干净，语义的HTML标记制作成一种hacky，很酷的方式，而不需要任何JavaScript来清理它。

如何用kbd标签创建=和+键？

2 个答案:

在纯HTML中

标记

输出

代码

在JavaScript中

如何做到这一点

参考

代码

在JavaScript中，基于事件

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