classごとのstyleをあらかじめ定義しておき、動的にclassを変更する
classNameプロパティ
var foo = document.getElementById('foo');
foo.className = 'foo-changed';
classListプロパティ
foo.classList.toggle('foo-changed);
styleプロパティ P284
var foo = document.getElementById('foo');
foo.style.color = 'white';
スタイルシート自体の有効/無効化 P285
document.getElementById('some-css').disabled = false;
function onclick(event){
// スクリーン座標 (ディスプレイの左上を原点とする座標系)
print(event.screenX + " " + event.screenY);
// ウィンドウ座標 (ブラウザ表示領域の左上を原点とする座標系)
print(event.clientX + " " + event.clientY);
// ドキュメント座標 (ドキュメントの左上を原点とする座標系)
// 文書全体での位置の値が得られる
print(event.pageX + " " + event.pageY);
}
const xhr = new XMLHttpRequest();
// 非同期通信
xhr.onreadystatechange = () => {
// 4 => サーバからのレスポンス受信完了
if (xhr.readyState === 4) {
// httpレスポンスのステータスコード
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
// openでコネクションを張るわけではない
xhr.open('GET', 'test');
// サーバへリクエストを送信する
// 引数には送信するデータを指定する(GETやDELETEの場合はnull)
xhr.send(null);
// 第三引数にfalseを指定すると同期通信
xhr.open('GET', 'test', false);
xhr.send(null); // 通信終了までここで止まる
if(xhr.status === 200){
console.log(xhr.responseText);
}
var str = "{x: 1}";
var strJson = JSON.parse(str);
strJson.x; // => 1
var resJson = JSON.parse(xhr.responseText);
// 送信側
window.postMessage('Hello!', 'http://hoge.com');
// 受信側
window.addEventListener('message', function(event) {
console.log(event.data); // => 'Hello!'
}, false);
document.user.email.value; // form.user>input[name=email]
document.user.submit(); // データを送信。ただしsubmitイベントは発火しない
event | 発火タイミング |
---|---|
submit | データ送信時。ただしsubmitイベントでは発火しない |
focus | input要素にフォーカスが当たるタイミング |
blur | input要素からフォーカスが外れるタイミング |
change | 値の変更時。テキストボックスではinputを使う方が良い |
input | 値の入力時。文字を削除した場合も発火する |