如何使用骨干JS在Click事件上添加CSS属性

Question

I am trying to add a css property after a click event in backbone js.when i click the .hero-content div i need to add a background color to hero-content div.Here is my event

 events: function () {
            if (vc.app.currentDevice.minWidth >= 769 && !!Modernizr.video) {
                return {
                    'click .hero-content': 'heroToggled',
                    'mouseenter .hero-content': 'NewGroup'
                   };
            }
            return {};
        },

and function

heroToggled: function (evt) {
            var $heroContent = $(evt.currentTarget);
            var $backgroundToActivate = $heroContent.siblings('.hero-background');

               this.$backgrounds.css({
                opacity: 0,
                filter: 'alpha(opacity=0)'
            });
            $backgroundToActivate.css({
                opacity: 1,
                filter: 'alpha(opacity=100)'
            });

        },
 render: function () {
            this.$backgrounds = this.$('.hero-background');
            return this;
        }

Here what i need is when i click the .hero-content div i need to add a background color to hero-content div like below

html:not(.is-page-editor) .pdp-hero-group .fullscreen-hero:first-child .hero-content{
  border-color: #fff;
 background-color: rgba(255,255,255,.05);
}

I have tried like below but it is not working

 this.$backgrounds1.css({
                    bordercolor: '#fff',
                    backgroundcolor: 'rgba(255,255,255,.05)'
                });
 render: function () {
                this.$backgrounds = this.$('.hero-background');
                this.$backgrounds1 = this.$('.hero-content');
                return this;
            }

How to achieve this using backbone js?

Answer 1

From the fine jQuery css manual :

Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css( "background-color" ) and .css( "backgroundColor" ) . This means mixed case has a special meaning, .css( "WiDtH" ) won't do the same as .css( "width" ) , for example.

So if you want to change the background-color property, you need to say:

this.$backgrounds1.css({
    backgroundColor: 'rgba(255,255,255,.05)'
    // -------^
});

or

this.$backgrounds1.css({
    'background-color': 'rgba(255,255,255,.05)'
// -^----------^-----^
});

Similarly for border-color .