おぴよの気まぐれ日記

おぴよの気まぐれ日記

岡山やプログラミング、ファッションのこと、子育てや人生、生き方についての備忘録。

css上で動的に値の変更はできないけどhtmlに書けばできる

cssに設定する値を動的に変更するとかできないのか?なんて思ったことないでしょうか?

例えば、

  • ユーザー毎にボタンの色や背景色などを変更したい!
  • 条件に応じてbackgroundに画像を入れたり、差し替えたりしたい!

結論から言うとできます!

ただcssでは出来ないのでhtmlにstyle属性を指定してcssを書き込めばokです!

今回はナビゲーションバーにある予約ボタンをユーザー毎に変更する例です。

model

前提としてユーザー = userモデルがあり、そこにカラーコードが設定されているとします。

id name color created_at updated_at
1 opiyo 30a8b5
2 kuma 000
3 fuzo fff

シンプルな使い方

view

haml

.event__nav
  = link_to '予約', '#', style: "background-color: ##{user.color}"

html

<div class="event__nav">
  <a style="background-color: #30a8b5" href="#">予約</a>
</div>

条件がいっぱいあるときの使い方

view

haml

.event__nav
  = link_to '予約', '#', style: event_nav_btn_style(user)"

link_toは第三引数にstyle属性を使えば、htmlに直接cssの設定ができます。

html

<div class="event__nav">
  <a style="background-color: #30a8b5" href="#">予約</a>
</div>

helper

条件が多かったりする場合はhtmlからhelperメソッドを呼び出して上げればokです!

def event_nav_btn_style(user)
  if user.name == 'hogehogehoge'
    return 'background-color: #FF7A00;'
  elsif user.name == 'piyopiyopiyo'
    return "background-color: ##{user.color};"
  else
    return 'background-color: black;'
  end
end