logo
Published on

JavaScriptで小さいツールウィンドウを作成

Authors

JavaScriptで小さいツールウィンドウみていなものを作ります。

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


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')}

各ツール価格:1万円~

サポート:6千円/1時間*

見積もり:無料


*一律・1時間未満切上

👉 詳細はこちらから。📧 お問い合わせ

ご覧いただき、ありがとうございます。本サイトの運営コストは広告をご覧いただくことで賄われています。様々な有名サービスが本サイト経由限定・期間限定で無料・割引・キャッシュバックになる、お得なプロモーションをご利用いただくことで、本サイトの運営をご支援いただけます。