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

Question

几天来我一直在尝试解决这个问题，但没有找到解决方案。我正在开发一个旨在从数据库中检索信息的 Web 应用程序。我正在使用 Meteor 和 blaze。事实上，我想 更改模板事件中的 css 属性 无论它处理点击目标元素的 css 比例还是 any DOM 同一模板中的元素。

这是我的模板代码标签：

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

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

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

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

Answer 1

好了，现在可以了。它处理语法问题：

我写了

simpleInput.style.padding = '2 em';

而不是...

simpleInput.style.padding = '2em';

简而言之，在流星模板中更改 DOM 元素（不是事件的目标）的 [=25=] 属性 :

Template.devicesConfiguration.events({

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

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

        simpleInput.style.padding = '2em';

    }

});

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

再见！

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

How to change CSS properties in Meteor Templates?

javascript

css

templates

meteor

meteor-blaze