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);
}
}
}