5

これはとても奇妙です。シンプルなボタンがあります：

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

画面に小さな要素が表示されていることにとても驚いています。なぜそのように見えたのですか？

どうしたの？デモはこちら

4

7 に答える 7

22

ボタン テキストがありません。inputボタンのタイプは、value属性を介してテキストを割り当てますが、次のことbuttonはしません:

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

デモ: http://jsfiddle.net/tymeJV/v9JTQ/4/

于 2013-09-20T18:22:27.137 に答える
5

ボタンが小さい特定の理由についてはvalue、ボタン要素に表示されないため、ボタンとして入力された入力要素を考えているためです。ボタンに「1Day」というテキストを表示するには、2 つのボタン タグの間に配置する必要があります。要素のタイトル属性は、要素の上にカーソルを置いたときにテキストに「タイトル」が表示されるようにするものです。これは、どの要素でも機能します。

ただし、このボタンの実装にはいくつかの基本的な問題があり、対処することでボタンの使用が改善されると思います。

使うときは型を使う<button>

まず、ボタンのデフォルトのタイプは送信です。ボタンがたまたまフォーム内にある場合、これは望ましくない副作用を引き起こす可能性があります。onclick に関連付けられたイベントがあっても、フォームを送信することになります。そのため、すべてのボタンは適切に入力する必要がありますtype="button"。

ボタンを使用する理由

ボタンは大規模なサイトではめったに見られません。その主な用途は、2 つのボタン タグ内で画像を使用することにあります。ボタンを作成するより一般的な方法は、<input type="button">. もう 1 つの方法は、 を使用し<div>て、そこからボタンの感触を作成することです。この 2 つのデモを後で紹介します。

スクリプトのインライン化を避ける

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

input demo

html

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

スクリプト例

現在、ボタン、入力、またはカスタム div の使用に関係なく、スクリプトを外部委託することができます。スクリプトに対してこのアプローチに従うと、ページですべてのスクリプトを 1 か所にローカライズできます。1 つの場所に置くと、参照としてロードすることを決定<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");
};

スクリプト + 入力デモ

スクリプト + div デモ

于 2013-09-20T19:07:50.333 に答える
3

タイトルを正しく指定していません。この jsFiddleを参照してください。

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

編集：また修正されonClickました。

于 2013-09-20T18:22:38.890 に答える
1

現在、 にはテキストがありませんbutton。

a を指定しvalueても、その内容は設定されません。

ボタンの仕様を確認するには、次を参照してください。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

最も基本的な button 構文:

<button>

/* ADD SOME TEXT HERE! */

</button>

jsFiddle のデモはこちら

于 2013-09-20T18:23:05.760 に答える