style.cssText の使い処に関する考察 - IT戦記
cssText って知ってますか？ cssText っていいうのは CSSRule オブジェクトとか CSSStyleDeclaration が持っている情報を css ファイルに書く形式の文字列にしてくれる機能です。 乱暴に言ってしまえば、 css 系のオブジェクトが持っている innerHTML みたいなものです。 具体例を見てみましょう。 こんな感じの body があるときに <body style="margin: 1em; padding: 1em; border: 1em">....</body> こんな感じで使えます。 alert(document.body.style.cssText); // 'margin: 1em; padding: 1em; border: 1em' 簡単でしょう？(ボブ略 設定も出来ますよ こんな感じ // さっきの続き document.body
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 で幅に合わせて文字列を切りつめる - Psychs's blog
デスクトップアプリを開発してると、ListView のカラム幅が足りなくなったときに「My Docume...」のように自動的に末尾を「...」で埋めて切りつめてくれる機能がある。ウェブでも同じことをやりたかったので、作ってみた。 まず、文字列の幅を測定するには、 <span id="ruler" style="visibility:hidden;position:absolute;"> </span> みたいな隠しエレメントを用意しておいて、 String.prototype.getExtent = function(ruler) { var e = $(ruler); var c; while (c = e.lastChild) e.removeChild(c); var text = e.appendChild(document.createTextNode(this)); var
スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法
画面を上下に分けて，上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い，次のようにしてみたんですがうまくいきません． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> <div style="width:100%; height:100%; background-color:#fcc; "> 画面下部 </div> </body> </html> 要は下部の「残り全部」のやり方がわかっておらず，全体的な高さが100px+100%になり，表示画面より下に100pxはみ出してしまいます． 次のようにdivを入れ子にするとうまくいくんですが，内部に表示させる内容によって
max-width in IE
Internet ExplorerではCSSの各プロパティにexpressionというものを指定でき、その中にはJavaScriptがかなり自由に記述できます。それを使ってmax-widthなど、IEが非対応なプロパティを擬似的に実現しようという、max-width in Internet Explorerというページを見つけました。 実用性は高いかもしれません。特にCSSのみでレイアウトを制御している場合、max-widthもそうですが、min-widthも使いたいと思うことは多々あることなような。うちみたいに各エントリを矩形でくくっている場合、ブラウザの幅や内容物によって矩形の大きさが変化してしまうのは、なかなか避けることができないですしね。 ただ、expressionは美しくないというか、グロい感じが。いや、validatorとおらないからとかそういう理由ではなくて、それなら普通にJ
CSSルールを一括で追加する - FAX
CSSルールを一括で追加する JavaScript IEのStyleSheet#addRule(selector, property)は、セレクタごとに実行しなくてはいけないため代替を書きました。 Firefox、IE 6.0、Operaで確認しました。 function addRules(css){ document.body.appendChild( document.createElement('span') ).innerHTML = '<span style="display:none">DUMMY</span><style tyoe="text/css">' + css + '</style>'; } ダミーのエレメントがないと、IEではエレメントの追加を検知しないようです。 参考リンク 暴満館 » JavaScriptでCSSを弄る際のメモ The styleSheet o
暴満館 » JavaScriptでCSSを弄る際のメモ
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。 – 俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。 結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは知らね。 スタイルシートのルールを弄る div内の全要素をgetElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる。 function addRule( selector, property ) { if( document.styleSheets[0].addRule ) //IE document.styleSheets[0].addRule( selector, "{" + property + "}" );
JavaScript for CSS(3)
JavaScript for CSS (3) class属性値やid属性値を変更することも可能です。 <LINK rel="stylesheet" type="text/css" href="style1.css"> <LINK rel="stylesheet" type="text/css" href="style2.css"> <STYLE type="text/css"> <!-- .class1 { text-decoration: underline; background-color: #fee; color: red; } .class2 { text-decoration: line-through; background-color: #eef; color: blue; } #id1 { background: #FDF5E6 url(img/bac01c.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MY TOWN NAGASAKI
Dragon Labs | The Octopus Engine