- ベストアンサー
リンクの有無を判別して画像の表示/非表示を自動で行いたい
- リンクの有無を判別して画像の表示/非表示を自動で行いたい。JavaScriptを使用し、リンクURLに応じて画像を表示または非表示にします。
- 具体的には、画像リンクのタグのhref属性が空欄でない場合、画像を表示するように設定します。それ以外の場合は画像を非表示にします。
- この処理をページの読み込み時に実行するため、<body>タグのonload属性に指定しています。しかし、実行時にオブジェクトの指定エラーが発生してしまっています。どうすれば解決できるか教えてください。
- shian_000
- お礼率46% (7/15)
- JavaScript
- 回答数10
- ありがとう数8
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
やっぱり function nolink(){ if(document.getElementById("link01").getAttribute("href") != ""){ document.getElementById("link01").style.display = 'inline'; } else{ document.getElementById("link01").style.display = 'none'; } } にしてね
その他の回答 (9)
- think49
- ベストアンサー率59% (285/482)
#5,6,9 です。 #9で使用した document.evaluate() はライブラリを使うことで旧来のブラウザにも対応することが出来ます。 IE8もOKでした。 JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記 http://d.hatena.ne.jp/amachang/20071112/1194856493 ただ…、ここまで書いておいていうのも何ですが、 <style type="text/css"><!-- a[href=""] { display : none; } --></style> を使うと、属性セレクタを使用可能なIE7以降、モダンブラウザは対応できています。(#1さんの回答より) スタイルシート［CSS］/CSSの基本 - TAG index Webサイト http://www.tagindex.com/stylesheet/basic/index.html JavaScriptを利用するなら、「属性セレクタ」未対応のブラウザにだけ定義すべきですが、そのぐらいなら、IE9.js を利用するのが一番手っ取り早いと思います。 ie7-js - Project Hosting on Google Code http://code.google.com/p/ie7-js/ queryProperty() はCSSで表現できない振る舞いを定義するのには良い方法ですが、元々CSSに備わっている機能を代替するだけなら既存のライブラリで十分ではないでしょうか。
お礼
ご回答ありがとうございます。 yuu_x様の記述はCSSだったのですね。 すっかり勘違いしておりまして、<script></script>で囲んでいました・・・。 属性セレクタというものは初めて知ったので、とても役に立ちました。 しかし残念ながら、私が導入を考えているページでは上手く動作しませんでした。 PHPで変数としてhrefを扱っているからかと思います。 また、文章型宣言は入れずにページを構成していた為、このCSSを動かす為に文章型宣言を入れると他のレイアウトが崩れてしまいました。 また、以前の改良版ということで記述を頂いた方ですが、何故かこちらではエラーになってしまいました。 JavaScript-XPathもダウンロードしたのですが・・・。 ですが、非常に役に立つ情報を多数頂き、本当に感謝しております。 JavaScriptやそれに関連することを今後も頑張って勉強していこうと思います。 ありがとうございました！
- think49
- ベストアンサー率59% (285/482)
#5,6です。 IEでも動作するようにしました。 ------ <script type="text/javascript" src="./javascript-xpath-latest-cmp.js"></script> <script type="text/javascript"><!-- function queryProperty(styleSheets, properties){ var trimReg = /^\s+|\s+$/g; var result = []; var index, match; properties = (properties.replace(/^\(\s*|\s*\)$/g, '')).split(/\)\s*and\s*\(/); for(var i=0, l=properties.length; i<l; i++){ index = properties[i].indexOf(':'); properties[properties[i].substring(0,index).replace(trimReg, '')] = properties[i].substring(index+1, properties[i].length).replace(trimReg, ''); } for(var i=0,l=styleSheets.length; i<l; i++){ for(var j=0, cssRules=styleSheets[i].cssRules||styleSheets[i].rules, m=cssRules.length; j<m; j++){ for(var key in properties){ if(properties.hasOwnProperty(key)){ match = (cssRules[j].style[key] === properties[key]) ? true : false; } } if(match){ result.push(cssRules[j]); } } } return result.length ? result : null; } function selectorText2XpathExpression(selectorText){ var xpathExpression; selectorText = selectorText.match(/^([a-zA-Z]+)\[([a-z]+=(?:"[^\u0022]*"|'[^\u0027]*'))\]$/); // IEの selectorTextプロパティ は A{href=''} を返す xpathExpression = '//'+selectorText[1].toLowerCase()+'[@'+selectorText[2]+']'; return xpathExpression; } function diplayNone(event){ var doc = event.target || this.document; // var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( -think-display: none )'); // 独自に拡張したプロパティ(-think-display) はGoogleChrome4.1で拾えない var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( color: white )'); // CSS規定のプロパティは拾える var targets; for(var i=0, l=cssRules.length; i<l; i++){ targets = doc.evaluate(selectorText2XpathExpression(cssRules[i].selectorText), doc, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); for(j=0, m=targets.snapshotLength; j<m; j++){ targets.snapshotItem(j).style.display = 'none'; } } } //--></script> </head> <body onload="diplayNone(event);">
- yyr446
- ベストアンサー率65% (870/1330)
yyr446です。 ごめんなさい。<a>はインライン要素だから、 display='block'じゃなくdisplay='inline' でした。
- think49
- ベストアンサー率59% (285/482)
#5の続き。 ------------- function diplayNone(event){ var doc = event.target || this.document; // var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( -think-display: none )'); // 独自に拡張したプロパティ(-think-display) はGoogleChrome4.1で拾えない var cssRules = queryProperty(doc.styleSheets, '( display: none ) and ( color: white )'); // CSS規定のプロパティは拾える var targets, index; for(var i=0, l=cssRules.length; i<l; i++){ index = cssRules[i].cssText.indexOf('{'); targets = querySelectorAllCustom(doc, cssRules[i].cssText.substring(0,index)); for(j=0, m=targets.length; j<m; j++){ targets[j].style.display = 'none'; } } } //--></script> </head> <body onload="diplayNone(event);"> <ul> <a href="http://examle.com/"><img src="test.png" alt="test" /></a> <a href=""><img src="test.png" alt="test" /></a> <a href=""><img src="test.png" alt="test" /></a> <a href=""><img src="test.png" alt="test" /></a> </ul> ------------ IE8で動作しなかったり、独自プロパティに反応しなかったり、とまだまだ改良の余地はありそうです。
補足
ご回答ありがとうございます。 せっかく頂いたご回答なのですが、当方の使用ブラウザがIE8ですので、IE8で動作しない、というのは大変困ります。(当方の説明不足でした。申し訳有りません。) また、JavaScriptの知識もまだまだ未熟ですので、頂いたJavaScriptを書き直す、ということも出来ません。 ですが、今後の参考にさせて頂きたいと思います。 ご丁寧なご回答、ありがとうございました。
- think49
- ベストアンサー率59% (285/482)
勉強がてら、queryProperty(styleSheets, properties) と querySelectorAllCustom(doc, selector) なる関数を作ってみました。 (全角空白は半角空白に置換してください) ------------ <style type="text/css"><!-- a[href=""] { display : none; color: white; -think-display: none; } --></style> <script type="text/javascript"><!-- function queryProperty(styleSheets, properties){ var trimReg = /^\s+|\s+$/g; var result = []; var index, match; properties = (properties.replace(/^\(\s*|\s*\)$/g, '')).split(/\)\s*and\s*\(/); for(var i=0, l=properties.length; i<l; i++){ index = properties[i].indexOf(':'); properties[properties[i].substring(0,index).replace(trimReg, '')] = properties[i].substring(index+1, properties[i].length).replace(trimReg, ''); } for(var i=0,l=styleSheets.length; i<l; i++){ for(var j=0, cssRules=styleSheets[i].cssRules, m=cssRules.length; j<m; j++){ for(var key in properties){ match = (cssRules[j].style[key] === properties[key]) ? true : false; } if(match){ result.push(cssRules[j]); } } } return result; } function querySelectorAllCustom(doc, selector){ var trimReg = /^\s+|\s+$/g; var selectorReg = /^([a-z]+)\[([a-z]+)="([^\u0022]*)"\]/; var index, match, node, result = []; match = selector.replace(trimReg, '').match(selectorReg) if(match.length){ node = doc.getElementsByTagName(match[1]); if(match.length > 1){ for(var i=0, l=node.length; i<l; i++){ if(node[i].getAttribute(match[2]) === match[3]){ result.push(node[i]); } } } } return result; } ------------- 文字数制限につき、次の記事に続きます。
- yyr446
- ベストアンサー率65% (870/1330)
IE8でエラーが出る ＝＞ああ、標準モードになってないんですね。 文章型宣言（<!DOCTYPE ～）が何もないのでしょう。 古いブラウザにも対応云々は別として、HTML4.01 Trasitionalぐらいは準拠しましょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> を付けましょう。 ある程度新しいブラウザーなら、よくある方法としてお手軽なのは、 対象要素にidを付加して <a href="{変数}" id="name1" name="link01"><img src="abc.jpg" name="gazou"></a> document.getElementById("link01")で要素を拾います。 こう↓なります。 function nolink(){ if(document.getElementById("link01").href != ""){ document.getElementById("link01").style.display = 'block'; } else{ document.getElementById("link01").style.display = 'none'; } } で、<A>要素ごと非表示になるはずです。 id付けるのがいや（同じnamenoの要素がない前提で）なら、 document.getElementsByName("link01")[0] を代わりに使えます。
補足
ご回答ありがとうございます。 文章型宣言をしたところ、「';' がありません。」というエラーが発生してしまいました。 また、こちらの説明不足だったのですが、複数の画像にこの処理を行いたいです。 前回教えて頂いたJavaScriptですと、複数の画像リンクを挿入すると正しく動作しなくなってしまいました。 今回教えて頂いたidを付けて、という方はエラーは発生しませんが、正常に動作しませんでした。 hrefに値が有っても無くても画像が表示されてしまいます。 3行目のblockをnoneに替えるとどの場合でも画像が非表示になってしまいました。 function nolink(){～}を<script language="JavaScript" type="text/javascript"></script>で<HEAD></HEAD>に記述し、<BODY onload="nolink()">で呼び出したのですが、どこか間違っているのでしょうか。 重ね重ねの質問で申し訳有りません。 よろしくお願い致します。
- yyr446
- ベストアンサー率65% (870/1330)
エスケープミスでした。 <body onload="document.querySelector('a[href=\'\']').style.display='none';">
補足
ご回答ありがとうございます。 早速動作確認をしたのですが、「オブジェクトでサポートされていないプロパティまたはメソッドです。」というエラーが出てしまい、正しく動作しませんでした。 当方で使用しているブラウザはIE8なのですが・・・。 我が儘を言って申し訳ないのですが、古いブラウザにも対応していると助かります。 よろしくお願い致します。
- yyr446
- ベストアンサー率65% (870/1330)
javascriptで、１行です。 ※古いブラウザーはだめよ（IE8以上とかFirefox3.1以上とかChromeとか） <body onload="document.querySelector('a[href=""]').style.display="none";"> <form name="aaa"> <a href="" name="link01"><img src="abc.jpg" name="gazou"></a> <span name="xx" ></span> </form> </body>
- yuu_x
- ベストアンサー率52% (106/202)
[CSS] a[href=""] {display : none;} /*Firefox 1+ Opera 8+ IE 7+ Safari ?*/ [/CSS]
補足
ご回答ありがとうございます。 知識不足で申し訳ないのですが、どこに記述すれば良いのかがわかりません。 記述する場所をもう一度ご教授頂けますでしょうか。 よろしくお願い致します。
お礼
ご回答ありがとうございます。 こちらで試してみましたが、やはり正常には動作しませんでした。 ですが、href属性の値取得について調べてみたところ、IEではフルパスで取得してしまうとのことでしたので、getAttribute("href")をgetAttribute('href','2')に変更したところ、無事解決致しました。 何度も回答頂き、大変感謝しております。 yyr446様に記述して頂いたJavaScriptを元に解決しましたので、今回はベストアンサーに選ばさせて頂きます。 ありがとうございました！