How to modify CSS rules without adding style attribute?

Question

I'm a newbie to Javascript and I am trying to implement a functionality to an existing project. I want to modify the CSS rules of an html element such that I will enlarge and restore the video window. When I select the element from Chrome Developer Tools I see the following properties:

element.style {

}

#plug-in-container.visible {
   height: 335px;
   width: 470px;
   margin-top: -147px;
   top: 50%;
   margin-left: -229px;
   left: 50%;
}

I use the following code to enlarge the video:

$('.visible').css( {
    height: '700px',
    width: '1000px',
    'margin-top': '-350px',
    top: '50%',
    'margin-left': '-480px',
    left: '50%'
} );

After this, I expect the values of #plug-in-container.visible to change but instead of that, I see the same values as strikethrough and I see that the element.style is updated:

element.style {
   height: 700px;
   width: 1000px;
   margin-top: -350px;
   top: 50%;
   margin-left: -480px;
   left: 50%;
} 

When I dynamically look at the html element, I see that an element style is created with values height, width etc. I don't want style to be created or updated, but I want to update #plug-in-container.visible, because that would be much safer in the conditions where I want to resize the video window. How can I do that?

Answer 1

Just define another CSS rule on cascade with at least the same specificity of the previous one (or higher, e.g.)

#plug-in-container.visible.enlarged {
   height: 700px;
   width: 1000px;
   margin-top: -350px;
   margin-left: -480px;
}

and then just add the new class using

$('.visible').addClass('enlarged');

so, as a further benefit, you also keep the css off from the javascript.

Of course you can use this approach as long as the values you need to update are fixed and not dinamically evaluated by javascript (in that case an inline style change is necessary)