为什么我的按钮太小了？

Question

这太奇怪了.我有一个简单的按钮:

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

我很惊讶地看到屏幕上有一个小元素.为什么会这样？

Answer 1

你没有按钮文字!input类型按钮通过value属性分配文本,button不:

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

Answer 2

至于你的按钮很小的具体原因,那是因为value不会在按钮元素上显示,你会想到输入一个输入元素作为按钮.为了让您的按钮显示文本"1Day",它必须位于两个按钮标签之间.当您将鼠标悬停在元素上时,元素上的title属性会导致文本显示为"title".这适用于任何元素.

但是,这个按钮的实现存在一些基本问题,我认为解决这个问题会改善你对按钮的使用.

使用时使用类型 <button>

首先,默认类型的按钮是提交.如果您的按钮恰好位于表单内,这可能会导致不必要的副作用.即使事件与onclick相关联,您仍然会最终提交表单.因此,所有按钮都应该正确输入,而且很可能type="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附加click事件

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

然后,填写代码,以满足您在单击元素时的特定需求.关于范围的注释:在"// code here"区域内,关键字this将引用单击的元素.

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

在脚本区域中将其添加到任何演示中,然后单击以查看其中的操作

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