elm.addEventListener

【お知らせ】JavaScriptで背景色の変更が出来るようになりました．

2024.07.05

おはようございます．【お知らせ】JavaScriptで背景色の変更が出来るようになりました．リロードしても画面の状態を維持するようになっています．因みにこれ、IPアドレスとかいうモノをこちらで取得して判断している訳ではありません．

ユーザーのブラウザの中の保存領域（のが多いw）にカラー色を保存するようになっています．なので、同ブラウザで見るとご自身が選択したカラー色で表示されるようになってます．要するに2015年？あたりから、各ブラウザにデータを保存出来る機能が追加されました．その機能をJS（javascript）言語で呼び出して使用できるようになっているのです．

このメリットはプライバシーが担保出来るということです．ユーザー側でデータを保持しているので消す事も可能ですし、どんなデータを保存しているのかもブラウザの検証項目のアプリケーション、ローカルストレージと進めば確認することが可能です．

因みにソース・コードはこちらです．


if(localStorage.getItem('zcolor')){
    document.body.style.backgroundColor = localStorage.getItem('zcolor');
}
if(document.querySelectorAll('#zcolors > .zcolor')){
    [...document.querySelectorAll('#zcolors > .zcolor')].forEach(elm=>{
        elm.addEventListener('click',(e)=>{
            let color = elm.getAttribute('data-zcolor');
            localStorage.setItem('zcolor',color);
            document.body.style.backgroundColor = color;
        });
    });
}

明日へ続く．

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2024年07月05 06:00日

タグ

body.style.backgroundColor, color, data-zcolor&#39, document.querySelectorAll, elm, elm.addEventListener, elm.getAttribute, foreach, gt, if, javascript, JS, let color, localStorage, localStorage.getItem, zcolors, アプリケーション, ローカルストレージ, 担保,

定番javascript、右クリックを禁止するあのコード．

2024.06.28

Logging

おはようございます、定番javascript、右クリックを禁止するあのコードを自分のサイトにも導入しました．因みにJSをOFFにするとリダイレクトページへ飛ぶ仕様になっているので右クリックから画像保存とかは出来ない感じになりました．スマホでどういう挙動になるのかは知らないけども．

  if(document.querySelector('video')){
    let elm = document.querySelectorAll('video');
    [...elm].forEach(el=>nocontextmenu(el));
  }
  if(document.querySelector('img')){
    let elm = document.querySelectorAll('img');
    [...elm].forEach(el=>nocontextmenu(el));
  }

  function nocontextmenu(elm){
    elm.addEventListener('contextmenu',function(event){
      event.preventDefault();
    });
  }

今まで画像保存とかしていた人はソースコードからURLを導き出して画像保存とかを行っても良いですが画像などの二次配布などは禁止しています．

尚、当たり前ですが上記のソースコードの可変などはOKです．

追伸：スマホはCSSで対応

video,img{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;
}

明日へ続く．

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2024年06月28 06:00日

タグ

document.querySelector, EL, elm, elm.addEventListener, EVENT, event.preventDefault, foreach, function, if, JS, moz-touch-callout, moz-user-select, nocontextmenu, none, querySelectorAll, user-select, webkit-touch-callout, webkit-user-select, リダイレクトページ, 追伸,