機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

javascriptで小さいツールウィンドウみたいなのを作成する

AD

プログラミング

ref:
JavaScriptで変数に代入するテキストを複数行にする方法まとめ – みかづきブログ その3

これをユーザースクリプトなどに追加すれば、右上に小さなウィンドウが作れます。
ボタンを押すことで、定義された関数を実行したりなどが可能です。


var toolwindow = document.createElement("div"); toolwindow.id = "toolwindow"; toolwindow.innerHTML = [ '<button type="button" style="width: 100%;" name="myFunction" onclick="myFunction()">myFunction</button>', '<div id="hidetoolwindow" onclick="hidetoolwindow()">hidetoolwindow</div>', ].join(""); document.body.appendChild(toolwindow); var toolwindowStyle = document.createElement("style"); toolwindowStyle.type = "text/css"; toolwindowStyle.innerHTML = [ "#toolwindow {", " position: fixed;", " color: #f8f8f8;", " z-index: 100000;", " top: 10px;", " right: 10px;", " margin-left: auto;", " margin-right: auto;", " display: block;", " background-color: black;", " height: 100px;", " width: 200px;", " opacity: 0.7;", " padding: 10px;", "}", "#toolwindow * {", "font-size: 16px;", "}", "#hidetoolwindow {", "padding-top: 60px;", "}", ].join(""); document.body.appendChild(toolwindowStyle); function myFunction(){alert('y')}
SPONSOR

オンラインブートキャンプ全12コースの「ウケ放題」 AD

コメントを残す

Close Menu