How to change CSS properties in Meteor Templates?

Question

I have been trying to fix this problem for days without finding a solution. I am working on a web application that aims at retrieving information from a db. I am using Meteor and blaze. As a matter of fact, i would like to change css properties in a template event wether it deals with the css proporties of the click target element or any DOM element in the same template.

Here is my template code tag :

<button type="button" class="buttonsValue" value="{{value}}"> 
        <div class="CheckButtonsLed"></div>
</button> 

Here is my template event code :

Template.devicesConfiguration.events({

    'click .buttonsValue':function(e, template){

//works well on the parent of the target of the click event :

    $(e.target.parentElement).css('background-color', 'chartreuse');

//works well on the target of the click event :

    e.target.style.backgroundColor="#ffcccc";

//does the same thing but with a different syntax :

    $(e.currentTarget).css('background-color', '#ffcccc');

// Does not work ...

    var CheckButtonsLed = template.find('.CheckButtonsLed');
    CheckButtonsLed.style.marginLeft = '2 em';
    }
});

It seems that it does not like the margin proporties while it works for the background property. my class element is my template devicesConfiguration.

I thought first it was because the target of the margin property is not the target of my click event but i tried to change the margin of the target of the event (.buttonsvalue) without results...

does someone have an idea ? thanks a lot ! :)

Answer 1

Well it works now. it deals with a matter of syntax :

i wrote

simpleInput.style.padding = '2 em';

instead of ...

simpleInput.style.padding = '2em';

to put in a nutshell, to change CSS Property of a DOM element (which is not the target of the event)in a meteor template :

Template.devicesConfiguration.events({

    'click .buttonsValue':function(e, template){

        var simpleInput = template.find('#simpleInput');

        simpleInput.style.padding = '2em';

    }

});

and don't put a div element in a button tag ...

Bye !