個人的にいろいろと立て込んでいて時間が経ってしまいましたが、 5 月にcodeなにがしがリニューアルしました。実は私も少しお手伝いさせていただきまして、ソースコード・ノウハウッ！のソースコード表示部分の JavaScript ウィジェットを制作しました。そこで、本日は新版codeなにがしのご紹介とともに、ソースコード表示ウィジェットの制作ノウハウなどを公開します。まあ、高度なことをやっているわけではありませんが、実例として多少は世の中の役には立つかな、と思っています（＾＾ゞ なお、これらの情報は OpenType 様の許可をいただいて掲載しています。情報公開を快諾してくださった OpenType 様に感謝いたします。 codeなにがしについてご存じない方もおられると思いますので、簡単にご紹介を。codeなにがしはソフトウェア技術者向けのノウハウ共有サービスで、主にユーザー間の FAQ コー

document.getElementById("test").style.backgroundColor = "#008800"; の様な感じで使う。 CSS JavaScript 背景

MoreCSSは、スクリプトや複雑なスタイルシートを使用しないと実装できないものを、スタイルシートで簡単に指定するだけで実装できるようになるスクリプトです。 MoreCSS ライセンスはCC3.0 Unportedのため、クレジットを消さない限り利用はフリーです。 下記は、MoreCSSで実装できるサンプルの一例です。 ※下記以外にも、たくさんの機能が実装されています。

またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない

このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。 – 前回同様、結構適当に書いてる部分もあるので鵜呑みにしないように。 IEとMozillaでは、スタイルシートの値を取得するには以下の処理を利用すればよい。 function getStyleValue( selector, property ) { property = ( property.match( /-/ ) ) ? property.camelize( ) : property; var stylesheets = document.styleSheets[0].rules //IE || document.styleSheets[0].cssRules; //Mozilla for( var i = 0, len = stylesheets.length; i < len; i++ ) { v

This is a multi level light weight drop down menu example based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart Style Generator I've added a style generator for the menu to the side bar. Just click on a color from the color grid then click the field you wish to apply it to. Once you leave the field (click elsewhere), the style will be applied to the Horizontal

Nifty Corners This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. Javascriptで指定のHTML要素を動的に角丸デザインにする方法。 NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。 例えば、次のような単一DIV要素も簡単に角丸にできます。 <div id="nifty"><p>test</p></div> <script type="text/javascript"> Rounded("div#nifty","#377CB1","#9