jQueryでheightが指定されていないエレメントを得る方法

質問

jQueryでheightが指定されていないエレメントを得る方法

javascirptとjQueryを使ってサイトのデザインを変更しようとしています。
その中で「スタイルシートでheigihtが指定されていない」要素を
対象外にするために取り出そうとしていますが、うまくいきません。

$("*").css("height") 又は$("*").height() は、実態の高さを返します。

それが本来的な使い方で、希望しているものが例外的とは理解しています。

何らかの方法が無いかと悩んでいます。
何か方法まはたヒントがございましたら、ご教授ください。

よろしくお願いします。

回答No.1

think49 · ベストアンサー

style属性で heightプロパティを指定していない要素なら、element.style.height で判定出来ます。

if (!jQuery('#hoge').get(0).style.height)

style属性以外のスタイルシートでスタイルを指定している要素か判定したいのなら、document.styleSheets からスタイル情報を抽出し、.is(selector) で一つ一つ判定してください。

.is() – jQuery API
http://api.jquery.com/is/
DOM:document.styleSheets - MDC
https://developer.mozilla.org/ja/DOM/document.styleSheets

お礼

回答ありがとうございます。
タグに設定されたスタイルシートはこのように取り出すのですね。
とても勉強になりました。

質問で情報不足がありました。
実は外部ファイルでのスタイルシート設定の有無を調べたかったのです。

回答にありましたdocument.styleSheetsを下記の方法で調べてみました。

$.each($.makeArray(document.styleSheets), function(){
alert(this.length);
});

しかし、結果はunderfinedが3回表示されるだけでした。
document.styleSheetsの考え方が間違っているでしょうか？

よろしくお願いします。

補足

下記の方法で設定を取り出すことが出来るようになりました。
IE8で確認。firefoxではエラー。

$.each($.makeArray(document.styleSheets), function(){
$.each(this.cssRules || this.rules, function(){
if( this.style.height ){
str +=this.selectorText　+":" +this.style.height+"\n";
}
});
});
alert(str);

もう少し出来そうな気がします。

回答No.6

think49

#1～5 です。

jQuery().each() で return false; すると break できると指摘を受けました。

each(callback) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/core/each/callback/
jQuery.each() – jQuery API
http://api.jquery.com/jQuery.each/

each() を Array#forEach の代替と思いこんでいたのがいけなかったようです…。
失礼しました。

回答No.5

think49

#4 です。

http://code.jquery.com/jquery-1.4.3.js をダウンロードして "some" でgrep検索してみましたが、それらしきコードはHITしませんでした。
jQuery は Array.prototype.some を実装していないのかもしれません。
IE 対応を考慮すると、Array.prototype.some を独自定義する必要がありそうです。

回答No.4

think49

#1, 2, 3 です。

ループ処理に jQuery.each を使っているようですが、each は条件に合致しても break できません。
for文で break するか Array.prototype.some に相当する機能を利用した方が良いと思います。
(具体的に何のメソッドが該当するのか、はちょっとわかりませんでしたが…。)

jQuery.each() – jQuery API
http://api.jquery.com/jQuery.each/

回答No.3

think49

#1, 2 です。

Firefox v3.6.6, Google Chrome 6 で動作し、Opera v10.63, IE8 で動作しないスクリプトを制作しました。
(Element.prototype.webkitMatchesSelector が Webkit, Mozilla にしか実装されていないので予想できたことではありますが。)

gist: 630663 (matchesCssRule.js) - GitHub
http://gist.github.com/630663

jQuery().is() を使えば、IE でも動作するんじゃないでしょうか。

---
6.2. Matching Elements - Selectors API Level 2
http://www.w3.org/TR/selectors-api2/#matchtesting
Node.mozMatchesSelector - MDC
https://developer.mozilla.org/en/DOM/Node.mozMatchesSelector

回答No.2

think49

#1 の補足。

Webkit には Element.prototype.webkitMatchesSelector が定義されているようです。
webkitMatchesSelector は jQuery.is() と同じ感覚で使えます。(Google Chrome 6 で動作することを確認)

<p id="hoge" onclick="alert(this.webkitMatchesSelector('p#hoge'));">paragraph</p>

webkitMatchesSelector - Element
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/WebKitDOMRef/Element_idl/Classes/Element/index.html#//apple_ref/js/instm/Element/webkitMatchesSelector/boolean/%28inDOMString%29