複数列の文字列の内１列の文字列を点滅させたい

前提

複数の文字列の内、１行が点滅しても他の文字列行が上下しない様にしたい。

実現したいこと

１行の文字列が点滅のたびに、点滅文字列以下の文字列が上下するので、これを上下しないようにしたい固定したい

発生している問題・エラーメッセージ

エラーメッセージ
エラーメッセージはありません

### 該当のソースコード

ソースコード
HTML

コード
```ここに言語を入力
<html>
<head>
<title>文字列を点滅します</title>
<style type="text/css">
<!--
#BOX{
font-size : 24px;
font-weight : bold;
color : #008000;
}
-->
</style>

<script language="JavaScript">
<!--
msg = new Array();
msg[0] = "JavaScript スタイルシートサンプル集"; //点滅させる文字列
msg[1] = " "; //空白の文字列
flag=true;
timer=1500; //メッセージの変わる速度（単位は千分の一秒）
window.onload=tenmetu;　//ページを読み込んだ時 tenmetu を実行

function tenmetu() {
if(flag){i=0;}
else{i=1;}
document.getElementById("BOX").innerHTML = msg[i];

flag = !flag;　//true と false の切り替え
setTimeout("tenmetu()", timer); //指定された時間後(ミリ秒)に関数を実行します
}
// -->
</script>
</head>
<body>
<div id="BOX">JavaScript スタイルシートサンプル集</div>
<P>ＡＢＣＤＥＦＧＨＩＪ</P>
<P>アイウエオカキクケコ</P>

</body>
</html>

試したこと

CSS Script の知識が乏しいので、物理的に解決方法がないか試してみたが効果なし
例えば、テーブルの１行に点滅する文字列を入れてみたが、効果なし

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

JSの勉強のためということならいいのですが、
今なら、CSS animation で実装するのがお勧めです。

css
1#BOX {
2  font-size: 24px;
3  font-weight: bold;
4  color: #008000;
5  animation-name: tenmetu;
6  animation-duration: 3s;
7  animation-iteration-count: infinite;
8}
9
10@keyframes tenmetu {
11  0% {
12    opacity: 1;
13  }
14  50% {
15    opacity: 1;
16  }
17  51% {
18    opacity: 0;
19  }
20  100% {
21    opacity: 0;
22  }
23}

ふんわりと点滅させるなら、@keyframes を下記に変更。

css
1@keyframes tenmetu {
2  0% {
3    opacity: 1;
4  }
5  50% {
6    opacity: 0;
7  }
8  100% {
9    opacity: 1;
10  }
11}

投稿2022/10/03 15:30

hatena19

総合スコア33715

ベストアンサー

文字列の有無じゃなくて、opacity（透明度）を、1 <-> 0（100% <-> 0%）で切り替えるのはどうでしょうか？

コード例

javascript
1// msg = new Array();
2// msg[0] = "JavaScript スタイルシートサンプル集"; //点滅させる文字列
3// msg[1] = " "; //空白の文字列
4let flag = true;
5let timer = 1500; //メッセージの変わる速度（単位は千分の一秒）
6window.onload = tenmetu;　//ページを読み込んだ時 tenmetu を実行
7
8function tenmetu() {
9  // if (flag) { i = 0; }
10  // else { i = 1; }
11  // document.getElementById("BOX").innerHTML = msg[i];
12  document.getElementById("BOX").style.opacity = flag ? 1 : 0;
13  flag = !flag;　//true と false の切り替え
14  setTimeout("tenmetu()", timer); //指定された時間後(ミリ秒)に関数を実行します
15}

三項演算子について

flag ? 1 : 0の部分は、三項演算子と呼ばれる記述方法で、if文を1行で書けちゃいます。

javascript
1// if文の場合、変数を用意しておく必要がある
2let opacity = 1
3
4// if文で値を書き換えて
5if (flag) { opacity = 1}
6else { opacity = 0 }
7
8// 代入
9document.getElementById("BOX").style.opacity = opacity

ifですると4行かかる処理が、三項演算子だと全部で1行ですみます。

javascript
1// これだけ！
2document.getElementById("BOX").style.opacity = flag ? 1 : 0;

ゆっくりふんわり点滅

cssにtransitionをつければゆっくりふんわり点滅してくれます。

css
1#BOX {
2  font-size: 24px;
3  font-weight: bold;
4  color: #008000;
5  transition: opacity 1.5s linear; /* ゆっくり点滅 */
6}

投稿2022/10/03 13:24

編集2022/10/03 13:41

Cocode

総合スコア2314

A.Kameyama

2022/10/03 13:46

皆様のご厚意に感謝いたします。４件のご回答を頂き、初心者の私には少々確認のための時間が必要です。ベストアンサーも一つだけ選ぶだけの知識がないので、少々（明日１日）時間を頂きたく。ありがとうございました。「文字列の有無じゃなくて、opacity（透明度）を、1 <-> 0（100% <-> 0%）で切り替える」は私の（具体案はありませんが）一つのアイデアとして有効な手段と考えています（生意気云ってすみません）