Dynamically changing css attribute value in HAML file

Question

My Haml file looks like :-

.playing-card-container
  .card-image

The CSS class for .card-image is

  .card-image {
    width: 68px;
    height: 68px;
    margin-bottom: 1em;
    background-image: image-url('some-url');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
  }

The haml file gets an image object from a rails server, and I want to dynamically change the background image for .card-image class. I know how to dynamically add classes or ids but how can we change a certain css attribute? I will appreciate if you can provide any help.

Shannon · Accepted Answer · 2017-01-16 23:10:08Z

1

You can use:

$(".card-image").css("background-image", url)

Edit: In HAML

.card-image{"style"=>"background-image:url(#{url});"},

edited Jan 16, 2017 at 23:10

answered Jan 16, 2017 at 22:58

Shannon

3,01812 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shannon Over a year ago

If it's in the HAML file you can use .card-image{style:"background-image: #{url} ;"}

python Over a year ago

if you can modify your answer to .card-image{"style"=>"background-image:url(#{url});"}, I will accept it

Collectives™ on Stack Overflow

Dynamically changing css attribute value in HAML file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related