divをクリック可能にするにはどうすればよいですか?
-
21-08-2019 - |
質問
<div><span>shanghai</span><span>male</span></div>
上記のような div の場合、マウスをオンにすると、カーソル:ポインタになり、クリックすると、
JavaScript 関数、その仕事をするにはどうすればよいですか?
編集:マウスがオンになっているときに div の背景色を変更するにはどうすればよいですか?
再編集:最初のスパンの幅を 120px にする方法は?Firefox では動作しないようです
解決
「something」のような ID を付けてから、次のようにします。
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
背景色の変更(更新された質問に従って):
something.onmouseover = function() {
this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
this.style.backgroundColor = '';
};
他のヒント
<div style="cursor: pointer;" onclick="theFunction()">
最も簡単に機能するものです。
もちろん、最終的な解決策では、マークアップをスタイル (CSS) および動作 (JavaScript) から分離する必要があります。読んでください。 別のリストにある この特定の問題を解決するだけでなく、マークアップ設計全般に関する優れた実践方法を紹介します。
jQuery を使用することをお勧めします。
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);
clickbox という CSS クラスを使用し、jQuery でアクティブ化することをお勧めします。
$(".clickbox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
あとは、div をクリック可能としてマークし、リンクを提供するだけです。
<div id="logo" class="clickbox"><a href="index.php"></a></div>
マウス カーソルを変更するための CSS スタイルも追加します。
.clickbox {
cursor: pointer;
}
簡単ですね。
を追加します クリック時 属性
<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>
カーソルを変更するには、次を使用します CSSのカーソルルール.
div[onclick] {
cursor: pointer;
}
セレクターは、IE の一部のバージョンでは機能しない属性セレクターを使用します。これらのバージョンをサポートしたい場合は、div にクラスを追加します。
質問を更新したので、目障りな例を次に示します。
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
これで背景色も変わります
その中で最も単純なものは次のとおりです。
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>