jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを元に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
Web 標準的な CSS の値変換方法（px → em など）（訂正あり） - IT戦記
はじめに W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。 まず CSSStyleDeclaration オブジェクトを取得する 例えば、 var decl = element.style; または、 var decl = getComputedStyle(element, ''); http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する var val = decl.getPropertyCSSValue('width') http://www.w3.org/TR/DOM-Level
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
Javascript 動的なCSSの適用 - とみぞーノート
function applyCSS(doc, cssfile, overwrite) { if (typeof overwrite == "undefined") overwrite = 0; // デフォルト:CSSの追加 // 既存のCSSを削除 if (overwrite && doc.styleSheets.length >= 1) { var links = doc.getElementsByTagName("link"); for (var i = 0 ; i < links.length ; i++) { if (links[i].rel == "stylesheet") links[i].parentNode.removeChild(links[i]); } } // CSS追加 if (document.all) { doc.createStyleSheet(cssfil
Javascript cssRules - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる
naoyaのはてなダイアリー - Perl で CSS セレクタ
ruby でスクレイピングして web の情報を取得するのには、今まで正規表現か xpath でやってたので、わりと面倒でした。で、ふと scrAPI というスクレイピングツールキットを知ったのですが、これがかなり便利そう。 このツールキットを使うと、CSS3 なセレクタを記述することで、要素を取得することができます。 という Ruby の scrAPI での CSS セレクタがいい感じでございますなあと指をくわえて見てたんだけど、 Per discussions in CSS Selector in Perl, I made a quick perl module HTML::Selector::XPath, which is available at http://svn.bulknews.net/repos/public/HTML-Selector-XPath/trunk/ now.
拡張子に対応したアイコンの取得 - 技術メモ帳
Firefox限定だが、 moz-icon://.拡張子?size=アイコンのサイズ で、拡張子に対応したアイコンを取得できるらしい。 そこでためしに、URLが html, pdf, zip で終わってるリンクに それに対応したアイコン画像を付加する Greasemonkey を作ってみた。 すごいリソース無駄遣いしてるが、これは後でリファクタリングする。 add_mozicon.user.js // ==UserScript== // @name add_mozicon // @include http://* // ==/UserScript== var extensions = [ 'html', 'pdf', 'zip' ]; var items = document.getElementsByTagName("a"); for(var i=0; i<items.length; i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptからCSSを操作する方法を結構詳しく調べてみた (Kanasansoft Web Lab.)