More than 1 year has passed since last update.

プルダウンで変更の前、後又は両方のそれぞれを表示するhtml, css及びJavaScript

HTML

Posted at 2023-01-04

contents.html

<head>
  <link rel="stylesheet" type="text/css" media="all" href="all.css">
  <script type="text/javascript" src="functions.js"></script>
</head>
<body>
  <div id="nav">
    <label for="before-after">新旧：</label>
    <select onclick="holdBeforeValue(this.value)" onchange="replaceClass(this.value)" id="before-after">
      <option value="before">旧</option>
      <option value="comparison" selected>比較</option>
      <option value="after">新</option>
    </select>
  </div>
  <div id="main">
    <p>柑橘類に分類される果物の例は、蜜柑や<del class="comparison">林檎</del><ins class="comparison">檸檬</ins>である。</p>
  </div>
</body>

all.css

del.before{
  text-decoration: none;
}
del.comparison{
  color: red;
  text-decoration: line-through;
  text-decoration-color: red;
}
del.after{
  display: none;
}
ins.before{
  display: none;
}
ins.comparison{
  color: red;
  text-decoration: underline;
  text-decoration-color: red;
}
ins.after{
  text-decoration: none;
}

functions.js

// プルダウンリスト変更前の値を保持するためのグローバル変数
var $glOldValue;

// onclick時にプルダウンリスト変更前の値をグローバル変数に格納
function holdBeforeValue($inputValue) {
  $glOldValue = $inputValue;
}

// onchange時にclassを置換
function replaceClass($newClass){
  // onclick時の取得した変更前の値をグローバル変数から取得
  var $oldClass = $glOldValue;

  //<DEL>タグ
  var $targetElements = document.getElementsByTagName("DEL");
  for( var $i = 0; $i < $targetElements.length; $i++ ) {
    // IEではreplaceが未実装なのでif文で実装
    // $targetElements[$i].classList.replace($glOldValue, $newClass);
      if ($targetElements[$i].classList.contains($oldClass)) {
        $targetElements[$i].className = $targetElements[$i].className.replace($oldClass, $newClass);
      }
  }

  //<INS>タグ
  var $targetElements = document.getElementsByTagName("INS");
  for( var $i = 0; $i < $targetElements.length; $i++ ) {
    // IEではreplaceが未実装なのでif文で実装
    // $targetElements[$i].classList.replace($glOldValue, $newClass);
      if ($targetElements[$i].classList.contains($oldClass)) {
        $targetElements[$i].className = $targetElements[$i].className.replace($oldClass, $newClass);
      }
  }
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up