html - 为什么我的按钮这么小？

Question

这太奇怪了。我有一个简单的按钮：

<button id="Day" value="1Day" title="Generate 1 day report" onClick=alert("Hi")>
</button>

我很惊讶在屏幕上看到一个小元素。为什么会出现这样的情况？

score 22 · Accepted Answer

您没有按钮文本！类型按钮通过属性input分配文本，不：valuebutton

<button id="Day" value="1Day" title="Generate 1 day report" onclick='alert("Hi")'>IM A BUTTON</button>

score 5 · Accepted Answer

至于您的按钮很小的具体原因，是因为value不会显示在按钮元素上，您正在考虑将输入元素键入为按钮。为了让您的按钮显示文本“1Day”，它必须位于两个按钮标签之间。当您将鼠标悬停在元素上时，元素上的标题属性会导致文本显示为“标题”。这适用于任何元素。

但是，这个按钮的实现存在一些基本问题，我认为解决这些问题将改善您对按钮的使用。

使用时使用类型<button>

首先，按钮的默认类型是提交。如果您的按钮恰好位于表单内，这可能会导致不必要的副作用。即使有与 onclick 相关的事件，您仍将最终提交表单。因此，所有按钮都应该正确键入，很可能使用type="button".

为什么要使用按钮？

Button 在大型网站中很少见。它的主要用途源于在两个按钮标签内使用图像。制作按钮的更常见方法是使用<input type="button">. 另一种方法是使用 a<div>并从中创建按钮感觉。稍后我将展示这两个的一些演示。

避免内联脚本

将 onclick 事件直接连接到元素并不是很理想。最好使用标识符来附加这些事件。这样，如果您需要将相同的事件附加到多个元素，这很容易实现，而且您可以引用脚本以便对其进行缓存。这些标识符也可用于使用 css 为您的元素设置样式。

样式示例

Div Demo

一个不错的方法是使用 div 并使用您自己的样式

html

<div id="Day">Generate Day Report</div>

css

#Day{
 border: outset;
 padding: 2px;
 display: inline-block;
 cursor: pointer;
}
#Day:hover{
 border: inset;
}

html

<input id="Day" type="button" value="1Day" title="Generate 1 day report" />

脚本示例

现在，无论使用按钮、输入还是自定义 div，您都可以外包脚本。对您的脚本遵循这种方法将允许您的页面将所有脚本本地化在一个地方。将它放在一个位置允许您决定将其作为参考加载，<script src="urltoscript.js">并允许客户端缓存它（加载一次）。

首先，定位元素。

var theElement = document.getElementById("Day");

接下来，使用元素的原生 API 附加点击事件

theElement.onclick = function(){
 //code here
};

然后，根据您单击元素时的特定需求填写代码。关于范围的说明：在“// code here”区域内，关键字this将引用单击的元素。

theElement.onclick = function(){
 alert("Hi");
};

将此脚本区域添加到任何演示中，然后单击以查看它的实际效果

var theElement = document.getElementById("Day");
theElement.onclick = function(){
 alert("Hi");
};

score 3 · Accepted Answer

您没有正确指定标题。看到这个 jsFiddle。

<button id="Day" value="1Day" onClick="alert('Hi')">Generate 1 day report</button>

编辑：也修复了onClick。

score 2 · Accepted Answer

因为title没有做你认为它做的事情。尝试：

<button id="Day" value="1Day" onClick=alert("Hi")>Generate 1 day report</button>

score 2 · Accepted Answer

您需要添加文本。请注意，您还应该onClick在引号内加上引号。

<button id="Day" value="1Day" title="Generate 1 day report" onClick="alert('Hi')">You need text.</button>

score 1 · Accepted Answer

因为您没有在按钮上显示任何“文本”。

您将代码混合<input>在一起<button>

所以这里是代码：

<button id="Day" value="1Day" title="Generate 1 day report" onClick=alert("Hi")>1Day</button>

或者

 <input type="button" id="Day" value="1Day" title="Generate 1 day report" onClick=alert("Hi") />

希望这有帮助！

score 1 · Accepted Answer

中目前没有文字button。

指定 avalue不会设置其中的内容。

要查看按钮的规格，请参阅以下内容：

最基本 button 的语法：

<button>

/* ADD SOME TEXT HERE! */

</button>

7 回答 7