画像をラベルとして使用する場合、IEでは属性が機能しない。
2022-01-29 17:22:22
例えば
<input type="checkbox" id="a"><label for="a"><img src="... "></label>
欲しい効果は、"Bank of China"をクリックすると、チェックボックスにチェックが入る(またはチェックが外れる)ことです。FireFoxやCHROMEなどでは問題ないのですが、Internet Explorerでは食指が動きません。
解決策は、JSを使うことです。
window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows& quot;)>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
}
}
}
}
}
}
コピーコード
コードは以下の通りです。
<input type="checkbox" id="a"><label for="a"><img src="... "></label>
欲しい効果は、"Bank of China"をクリックすると、チェックボックスにチェックが入る(またはチェックが外れる)ことです。FireFoxやCHROMEなどでは問題ないのですが、Internet Explorerでは食指が動きません。
解決策は、JSを使うことです。
コピーコード
コードは以下の通りです。
window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows& quot;)>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
}
}
}
}
}
}
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLページのスクロールは、コンテンツの位置の一部が固定されていない場合の実装
-
入力ボックスのカーソルサイズ表示に矛盾がある場合の対処法
-
html.cssのオーバーフローを総合的に理解する。
-
HTML チェックボックス 説明テキストをクリックすると、ステータスの選択/解除ができます。
-
XHTMLコーディング 7つの基本仕様まとめ
-
Baiduの入力メソッドオープンAPIは、使用を移植するために自由であると主張する
-
Zen Coding 簡単で速いHTMLライティング
-
Webページでよく使われるコード より基本的なもの
-
IE8でIE7互換モードを起動させるためのコード
-
Firefoxで改行されない英字の解決法