a = document.querySelector('[class="nav-link active"]');
b = a.getBoundingClientRect().top;
scrollBy(0, b - 200);
dispatchEvent ボタン１おしたらボタン２クリック
<input type="button" id="btn1" onclick="test1()" value="ボタン1">
<input type="button" id="btn2" onclick="test2()" value="ボタン2"><br>
<input type="text" id="text1">
function test1(){
let event = new Event("click");
btn2.dispatchEvent(event);
}
function test2(){
text1.value += Number(1);
}
キーボードイベント
キーコード表
document.addEventListener('keypress', keypress_ivent);
function keypress_ivent(e) {
if(e.code === 'KeyA'){
//Aキーが押された時の処理
alert("Aがおされた");
}
return false;
}
HTML要素を追加
<form>
<input type="text" id="text1" onclick="test1()">
</form>
<script>
function test1(){
var a = document.getElementById("text1");
a.insertAdjacentHTML("afterend","<img src='画像URL' width='50' height='50'>");
}
</script>
HTML要素を追加２（JSとHTMLコードを直接サイトに流し込む）
chrome F12→コンソール（改行はShift+Enter)に以下のコードいれる
var a = document.getElementById("main");
function test1(){
alert(1);
}
a.insertAdjacentHTML("afterend",`
<form>
<input type="text" id="text1" onclick="test1()">
</form>
`);
コンソールスクリプトスニペット（コンソールより便利）
F12→ソース→ページ→スニペット→新規作成
新しいスニペットを作成→JSコード入力→Ctrl+Enter
クリップボードの値を貼り付け
<input type="button" id="btn1" value="input" onclick="test1()">
<script>
function test1(){
navigator.clipboard.readText().then(e => {
alert(e);
});
}
</script>
HTML内の要素AをBの前に移動
var a = document.querySelector('[class="buttons-outer"]');
var b = document.querySelector('[class="tabs-back"]');
b.appendChild(a);
b.parentNode.insertBefore(a,b);
HTMLで複数の要素ある時の削除(class="test")が２個ある場合
var a = document.getElementsByClassName("test");
a[0].remove(); a[0].remove();
新規ウィンドウの作成
window.open('URL', 'ウィンドウ名', 'width=600,height=360');
イベントの追加 addEventListener()
var text1 = document.getElementById("text1");
text1.addEventListener('click', Event, false);
function Event() {
alert(1);
}
HTML
<form>
テキストボックスがクリックされた時のイベントを追加
<input type="text" id="text1">
</form>
ローカルストレージ（F5で更新してもデータが残り続ける 設定ボタンなどに）
ローカルストレージに保存する
function save(){
//formのテキストボックス1取得 ID text1
var text1 = document.getElementById("text1");
//ローカルストレージに保存
localStorage.setItem('Key', text1.value);
//保存した内容をテキストボックスに入れる
var value = localStorage.getItem('Key');
}
ローカルストレージに読み込み
function load(){
//ローカルファイル名keyをvalueに入れる
var value = localStorage.getItem('Key');
//formのtext1のvalueに保存したkeyを入れる
document.getElementById("text1").value = value;
}
上のローカルストレージに必要なHTML
<form>
<input type="text" id="text1">
<input type="button" value="保存" onclicK="save();">
<input type="button" value="読み込み" onclick="load();">
</form>
チェックボックスのON・OFFをローカルストレージに保存（設定ボタンなどに）
HTML
<form>
保存ボタンを押すとチェックボックスが保存される(F5押しても残る)
<input type="text" id="text1">
<input type="checkbox" id="check">
<input type="button" value="保存" onclicK="save();">
<input type="button" value="読み込み" onclick="load();">
</form>
JS
var check1 = document.getElementById('check');
function load(){
//ローカルファイル名keyをvalueに入れる
var value = localStorage.getItem('Key');//true
//formのtext1のvalueに保存したkeyを入れる
if(value === 'true'){
check1.checked = true;
}else{
check1.checked = false;
}
}
function save(){
//formのテキストボックス1取得 ID text1
var text1 = document.getElementById("check1");
//ローカルストレージに保存
localStorage.setItem('Key', check1.checked);
//保存した内容をテキストボックスに入れる
var value = localStorage.getItem('Key');
}
クリップボードコピー
navigator.clipboard.writeText('コピーしたい文字列');
HTML内のclass取得してクリップボードに値をコピーする
>var a = document.querySelector('[class="クラス名"]');
>var a = document.querySelector('[id="ID名"]');
>navigator.clipboard.writeText(a.innerHTML);
指定の時間で
function test(){
alert(1);
}
setInterval(test,10); //10ミリ秒毎にtest()関数を実行
setTimeout(test,1000); //1秒後に一度だけtest()関数を実行
要素を最前面に表示
a2.style.position = 'relative';
a2.style.zIndex = '10000';
HTML内の要素を取得する
document.querySelector('取得したい要素');
document.querySelector('#id');
document.querySelector('#class');
document.querySelector('[name="gotou"]'); //name属性がgotou
document.querySelector('[href="/user/4717"]'); //hrefが/user/4717のHTML要素
document.querySelector('[class="nav-link active"]'); //classがnav-link activeと名のついた要素
idとclass属性以外は[]で挟む
エンターをJSで入力させる
document.dispatchEvent( new KeyboardEvent( "keydown",{key:"Enter"}))
HTMLの特定の要素の座標を取得（x,y）
var a = document.querySelector('取得したい要素');
var rect = a.getBoundingClientRect();
var x = rect.left + window.pageXOffset;
var y = rect.top + window.pageYOffset;
Vが押された時の処理
document.body.addEventListener('keydown',event => {
if (event.keyCode === 86) {
var b = document.querySelector('取得したい要素');
b.click();
}
});
特定のキーが押された時の処理（同時押し）
document.dispatchEvent(new KeyboardEvent( "keydown", {shiftKey: true, key: "ArrowUp" }))
function addEvent(){
//オブジェクト"btn2"のclickイベントにshowMessage関数を追加する
document.getElementById("btn2").addEventListener("click", showMessage, false);
}
function showMessage(){
alert('処理が追加されました');
}
最終更新：2023年01月20日 02:18
