Ｐａｇｅ 57 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼スタイルシートの選択・変更(js) YAma(作成sim氏) 02/8/2(金) 10:47 ┗Re:スタイルシートの選択・変更(js) ムック 03/3/29(土) 7:39 ┗Re:スタイルシートの選択・変更(js) sim 03/3/30(日) 2:32 ─────────────────────────────────────── ■題名 ： スタイルシートの選択・変更(js) ■名前 ： YAma(作成sim氏) ■日付 ： 02/8/2(金) 10:47 -------------------------------------------------------------------------
| //スタイルシートの選択・変更 //代替シートのあるページでスタイルシート切り替えを有効にするスクリプトです. //一度実行すると、シートのリストを（大抵は）ページ最上部に表示します。 //そこでシートを選択し再びこのスクリプトを実行すると、選択したシートが適用されます。 /* メモ：シートの選択はラジオボタンを使いたかったのだけど、setAttribute("name", "...")とかやってもname属性が設定されないように見えたり、というか生成したラジオボタンは個別にすら選択できないようなので挫折。 メモ2：選択ボックスの右端に閉じるボタンとかつけたかったのだけど、イベントに対するスクリプトをどう結び付ければいいのかわからず挫折。 参考にしたサイト：参考というかそのまま…というか。 http://members.jcom.home.ne.jp/jintrick/Personal/index.html - こちらのDOM関連リンク集（特にDOM!仕様書邦訳）を見ながら書きました。 http://east.portland.ne.jp/~sigekazu/index-j.htm - こちらのJavaScript for CSS。属性/DOMの一覧も非常に便利。 */ //メイン関数 function main() { var bugweb = new ActiveXObject("BugWeb.BugBrowserAPI"); var docviewObj; var doc; var cssBox; if (bugweb == null){ WScript.Echo("BugAPI Object Error."); WScript.Quit(); } docviewObj = bugweb.CreateDocumentViewObject(bugweb.ActiveView); doc = docviewObj.Document; //代替スタイルシートがあるかチェック if ((!doc.styleSheets) || (doc.styleSheets.length < 2)) { bugweb.ShowMessage("スタイルシートが使われていないか、代替スタイルシートが用意されていません。"); docviewObj = null; bugweb = null; WScript.Quit(); } //このスクリプトによるCSS選択ボックスがあるかどうかチェックし、 //なかったら選択ボックスを表示し、あったら選択されているシートを適用する。 if ((cssBox = doc.getElementById("BugWebCSSSelector")) == null) { makeSelectorBox(doc); //選択ボックスまでスクロール doc.getElementById("BugWebCSSSelector").scrollIntoView(true); } else { var sel_title = cssBox.lastChild.options(cssBox.lastChild.selectedIndex).value; for(var j in doc.styleSheets) { if (doc.styleSheets[j].title == sel_title) doc.styleSheets[j].disabled = false; else doc.styleSheets[j].disabled = true; } doc.body.removeChild(cssBox); } docviewObj = null; bugweb = null; } //スタイルシート選択用div、selectなどを作成する。 //@param doc documentオブジェクト。BugAPIで得たドキュメントビューオブジェクトのDocumentプロパティが渡される。 //例外処理とかしてないや function makeSelectorBox(doc){ var cssBox; var sheetSelector; //スタイルシート選択ボックス cssBox = doc.createElement("DIV"); with (cssBox){ setAttribute("id", "BugWebCSSSelector"); style.setAttribute("z-index", "1"); style.background = doc.body.style.background; style.color = doc.body.style.color; style.position = "relative"; style.top = "0"; style.left = "0"; style.width = "100%"; } cssBox.appendChild(doc.createTextNode("CSS Selector:")); //シート選択用select要素 sheetSelector = doc.createElement("SELECT"); with(sheetSelector) { setAttribute("id", "selector"); setAttribute("multiple", "false"); style.width = "50%"; } //シートのタイトルを項目名としてoption要素を追加していく for (var i = 0; i < doc.styleSheets.length; i++) { var sheetTitle = doc.styleSheets[i].title; if (sheetTitle.length == 0) sheetTitle = "(no title)"; var s = doc.createElement("OPTION"); s.setAttribute("value", doc.styleSheets[i].title); if (!doc.styleSheets[i].disabled) s.setAttribute("selected", "true"); s.appendChild(doc.createTextNode(sheetTitle)); sheetSelector.appendChild(s); } cssBox.appendChild(sheetSelector); doc.body.insertBefore(cssBox, doc.body.firstChild); } //メイン関数を実行 main(); |
| これはスタイルシートのON/OFFを選択できるんでしょうか？ また、どのようにして使えばいいのですか？ |
| 結構前のですね。あまり実用的ではないかと思います…。 このスクリプトを実行すると、そのページのデフォルトスタイルシートおよび 代替スタイルシートを選択するリストボックスを表示します。 そのリストボックスからスタイルシートを選択した状態で 再びこのスクリプトを実行すると、そのスタイルシートが適用されます。 リストボックスからは何らかのスタイルシートしか選択できません。なので、 >これはスタイルシートのON/OFFを選択できるんでしょうか？ ON/OFFの選択はできません。 スタイルシートをいじるスクリプトは、SleipnirやMDIBrowser用として より高機能なものがあるので、そちらを参考にされると一層便利な スクリプトになるのではないかと思います。 |