Dynamic style and class name of element

[belfe7]

I am working on dynamic style change according to element calss.
I tried like below. but It look like it is not rendered again with new class from template helpers.
I thought if an element gets new class, it search css and take styles matched with its class name.

sideNavi .focused{
  color: #333;
}    

<div class = "sideNavi {{ checkFocused}}" >  </div>


Template.sideNavi.helpers({
  checkFocused: () => 'focused',
});

Is it wrong? Should I use other solution?

I already found some other soutions, like below.

Dynamically change style

how can i dynamically change the style of an element. <nav class=“nav” style=“display:{{shownav}}”> <a href="{{pathFor ‘home’}}">Home</a> <a href="{{pathFor ‘nutrition’}}">Nutrition</a> </nav> <button type=“button” class=“hamburger”>hidemenue</button> and in the .js: Template.navigation.events({ ‘click .hamburger’: function(){ shownav=“none”; alert(shownav); } }); it alerts “none” but the nav doesn’t change to display:none; i thought this updates automatically (and hopefully with n…

we can use jquery or javascript like getElementsByClassName method and style.display property etc.