@marumarukoposted at 2023-02-20

if文で背景色を変更する方法

Q&A

Closed

解決したいこと

if文の条件分岐で背景の色を変更したいです。
「text」「title」がundefinedの場合、背景色で指定している色を無しにするといったことを行いたいです。

<div class="hoge">
 <a href="#">
 <img src="画像URL">
<div class="hoge_contents">
 <p class="title">タイトル</p>
 <p class="text">テキスト</p>
</div>
</a>
</div>

<style>
.hoge a .hoge_contents{
background:linear-gradient(0deg,rgba(0,0,0, .8)0%,rgba(0,0,0,0)50%);
}
</style>

「text」「title」に何かしらの文字が入っている場合は上記記載の背景で問題ないのですが、
何も入っていないundefinedの場合はこの背景のグラデーションを無くしたいです。

自分で試したこと

＄ (function(){
if(text = undefined || title = undefined){
$('.hoge a .hoge_contents').css('background','transparent')
}
});

などやりましたがコンソールで「null」と表示されできません。

どなたかご教示お願いいたします。

2Answer

@Kei05 posted at 2023-02-20

JavaScriptではなくても文字の有無ということであればCSSの擬似クラスのみで実装できますがこちらはいかがでしょうか？
1つの案としてみていただければと思います。

p:not(:empty) {
  background-color: #ddd;
}

See the Pen The :empty CSS pseudo-class by Kei (@kei05code) on CodePen.

1Like

@g-iki posted at 2023-02-20

一旦「自分で試したこと」のコードをとりあえず動くようにしたものは以下のようになります。

$(function() {
  if ($('.title').text() === '' || $('.text').text() === '') {
    $('.hoge a .hoge_contents').css('background', 'transparent');
  }
});

See the Pen Untitled by g-iki (@g-iki) on CodePen.

↑cssでhoge_contentsに対してグラデーションの背景を指定しているため、titleの方はほぼ白となります。(最終的にやろうとしていることが不明瞭なので、一旦コードとして動くところまでとしています。)

お節介かもしれませんが、jQuery側でcssのプロパティを直接弄るではなく、特定の条件を満たしたときにクラスを付与してあげるような実装の方が良いかもしれません。(再度同じグラデーションの色をつけたいときにcssに書いている$('.hoge a .hoge_contents').css('background', 'red');(←書くのが面倒なのでredにしていますが・・・)のように書く必要があります。

See the Pen Untitled by g-iki (@g-iki) on CodePen.

0Like

Are you sure you want to delete the question?

if文で背景色を変更する方法

解決したいこと

自分で試したこと

2Answer

Your answer might help someone💌