javascript - 如何更改 Meteor 模板中的 CSS 属性？

Question

我已经尝试解决这个问题好几天了，但没有找到解决方案。我正在开发一个旨在从数据库检索信息的网络应用程序。我正在使用 meteor 和火焰。 事实上，我想更改模板事件中的CSS属性，无论它处理点击目标元素还是同一事件中的任何 DOM元素的CSS属性模板。

这是我的模板代码标签:

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

这是我的模板事件代码:

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';
    }
});

它似乎不喜欢边距比例，而它适用于背景属性。我的类元素是我的模板 devicesConfiguration。

我首先认为这是因为边距属性的目标不是我的点击事件的目标，但我尝试更改事件目标(.buttonsvalue)的边距但没有结果...

有人有想法吗？多谢 ! :)

Answer 1

现在可以了。它处理语法问题:

我写了

simpleInput.style.padding = '2 em';

而不是...

simpleInput.style.padding = '2em';

简而言之，更改 meteor 模板中 DO​​M 元素(不是事件的目标)的 CSS 属性:

Template.devicesConfiguration.events({

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

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

        simpleInput.style.padding = '2em';

    }

});

并且不要将 div 元素放入按钮标签中...

再见!