JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
文字列から要素を作りたいときはinnerHTMLではなくcreateContextualFragmentを使う - 素人がプログラミングを勉強していたブログ
追記：ベンチマークをコメントを元に修正 文字列から要素を作りたい場合、 var temp = document.createElement('div'); temp.innerHTML = '<span>foo bar fizz buzz!</span>'; とやることが多い。 だが、不要なdiv要素ができて気持ち悪いし、for文でchildNodesをひとつずつ処理する必要があって、不便。 divの中にhead要素を入れることはできないので、innerHTML=''としても、要素は作られない。 RangeのcreateContxtualFragmentを使うと、こういった問題を避けることができる。 例えば、上のコードをcreateContextualFragmentを使って書き直すと、 var range = document.createRange(); range.createCon
最速インターフェース研究会 :: HTMLドキュメントを解析して特徴的なループを見つけるBookmarklet
- 全てのDOMノードを列挙する - ノードは次のように文字列化される。 0: /html[0]/body[0]/div 1: /html[0]/body[0]/div[0]/div 2: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 3: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 4: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 5: /html[0]/body[0]/div[0]/div[0]/ul[0]/li 直前の階層までは添え字つき、最後のノードはタグ名のみにする。 class名、id名は排除する。各々のサイトのルールで記述されたruleよりも タグのネスト構造の方が変化に強いし機械的に抽出しやすいのではないか？ 出現回数でソートする。li要素2-5はループであることが分か
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。 IE、FireFox、Opera、Safariにて、表示モード毎に参照すべきプロパティをまとめてみました。(Safariについては2007/05/20に追記) 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth d
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
Bridge Word
This shop will be powered by Are you the store owner? Log in here
MozillaDOMの不思議 style.display をいじるよりappendChildの方が早い - nazokingのブログ
GreaseMonkeyをいじっていたんですが、２ちゃんねるのスレッド一覧をインクリメントサーチするスクリプトを書いてたんです。 // as は 検索したい文字列のリスト // as[i].element は文字列に対応する A エレメント // ↑はdocument.getElementsByTagName('A')で取得 // v は検索文字列 for( var i=0; i<as.length; i++ ){ if( v=='' || as[i].indexOf( v )>-1 ){ as[i].style.display=''; }else{ as[i].style.display='none'; } }とまあ、こんなかんじ。で、そこそこ動いていたんで、気に入ってまちBBSでも動くようにしてみたら、やたらと時間がかかるです。まちBBSのスレッド一覧ではスレッド数が1000以上あるか
日本語テキストをテーブルで表示する：高速化バージョン
いやなブログ: 日本語テキストをテーブルで表示するの高速化バージョン。 DOMでのHTML組み立ては非常に遅くてJavaScriptの配列で組み立ててから 一気にinnerHTMLに代入したほうが速い。特にIEの場合は差が顕著、5倍ぐらいは速いはず。 DocumentFragmentを使うという手もあるが、2倍程度にしか速くならなかった。 innerHTMLを使ったほうが良い、というわけではなくて時と場合によりけり。 innerHTMLとappendChildを組み合わせて使うと大体の場合最速。 こういうやつ tmp = document.createElement("div"); tmp.innerHTML = 複雑なHTML; body.appendChild(tmp); body.innerHTML += tmp.innerHTML は絶対に避ける。innerHTMLの読み書きは、ど
IE 6.0 - Javascript - Benchmark - W3C DOM vs. innerHTML
Section 8F of the book discusses innerHTML and when it's preferable to "real" W3C DOM methods. This is a test page intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly from browser to browser. Each of the test scripts creates a 50x50 table, all of whose cells are filled with one character, *. Then the time y
DocumentFragmentの考察 - Personnel
DOMユーザーの方は、このようなことが出来たら良いと思ったことはありませんか? NodeListのクローンを作成する NodeListをそのままappendChildのパラメータにする もちろんこのようなことは出来ません。NodeListのitem一つ一つのクローンを作成し、一つ一つをappendChildしなければならないのです。しかし、DocumentFragmentを利用することによって、このような感覚の操作をすることが可能になります。 Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/documentFragment.html#seeds ここに、文書A、文書B、文書C があったとします。 文書A <rootA> <item /> <item /> <item /> <
XUL Apps > Tips > DOM3 XPathをノードの検索に活用する - outsider reflex
X-0032 DOM3 XPathをノードの検索に活用する 2005/5/7 2005/5/11 2005/5/12 2006/4/12 Home Back to XUL Tips Prev. Next DOM3 XPathを使うと何が便利？ MozillaはXPath関係の機能をDOM3 XPathに則って実装しています。これを活用すれば、getElementsByTagName()などのメソッドと条件分岐を駆使してノードを収集しなくても、複雑な条件でノードを検索することができます。 以下に一例を示しましょう。 <menuitem label="リンクをタブで開く" hidden="true"/> <menuitem label="リンクをウィンドウで開く" hidden="true"/> <menuseparator> <menu label="選択範囲を送る"> <menupopup
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Technical documentation