HTMLDOMPageTransitionイベント
DOM PageTransitionEventは、ユーザーがWebページ間を移動するときに発生するイベントです。
PageTransitionEventオブジェクトのプロパティ
| プロパティ | 説明 |
|---|---|
| 持続 | ウェブページがキャッシュされているかどうかに応じて、trueまたはfalseの値を返します。 |
イベントのタイプはPageTransitionEventオブジェクトに属します
| イベント | 説明 |
|---|---|
| pageHide | これは、ユーザーがWebページから移動したときに発生します。 |
| pageShow | ユーザーがWebページに移動したときに発生します。 |
例
PageTransitionEventオブジェクトの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM PageTransitionEvent Event Demo</h1>
<button onclick="checkPage(event)" class="btn">Click me</button>
<script>
function checkPage(event) {
if (event.persisted) {
confirm("Page was cached by the browser");
} else {
confirm("Page was not cached by the browser");
}
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「クリックしてください」をクリックします 」ボタンをクリックして、ページがブラウザによってキャッシュされたかどうかを確認します。
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE
-
HTMLDOMイベントタイププロパティ
HTML DOMイベントタイププロパティは、クリック、キープレス、ロード、タッチエンドなどのイベントのタイプに対応する文字列を返します。 以下は構文です- トランジションが実行された秒数を返す- event.type イベントタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Event type</title> <style> form { width:70%;