JavaScriptからCSSファイルに書かれた定義を取得する

JavaScriptからCSSの値を取得するには、たいていの場合はjQueryのcssメソッドを使えばOK.

$('#item').css('background-color');

ただし、これがCSSファイルに書かれたmax-widthやmax-heightの場合だとChromeやFirefoxごとに実装が違っていて、%で返ってきたり計算済みのpxで返ってきたりと面倒くさい。こうなる前のCSSファイルに書かれた最初のCSSの値をとる方法について書く。

続きを読む JavaScriptからCSSファイルに書かれた定義を取得する

FirefoxでSVGからBlobを生成するとfilterが適用されない

※本記事は解決していない内容のメモです。

svgからBlobを生成すると、imgに直接画像を入れたりcssの画像URLとして取り扱ったりできる。その中でぼかし効果のあるフィルターを適用していたところ、Chromeでは適用されるのにFirefoxでは適用されなかった。「feGaussianBlur blob firefox」とかで検索しても関係しそうなWebページが見つからなかったので、メモを残す。

続きを読む FirefoxでSVGからBlobを生成するとfilterが適用されない

[jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った

textareaに表示されているキャレット位置(カーソル位置)の画面上のXY座標(ページの一番左上からの位置)を取得したいと思って検索したけれど、キャレットの文字列内の位置(何文字目)を取得するライブラリばかりで、画面上からの位置を取得できるライブラリがなかった。なので、テキストエリアを指定するだけで簡単に現在のキャレット位置の座標が分かるライブラリをつくった。サジェストを表示するWebアプリケーション(EclipseのようなIDEとか?)を作りたい時に便利。jQueryがなくても使えるし、jQueryがあっても使える。

githubにアップロードしているので、そちらも参照。
https://akiroom.github.com/caretposition.js/

以下、使い方の解説。

続きを読む [jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った