Setting header height for column with css AND JavaScript: what takes precedence?

In case both css and JavaScript set the column header height, which one takes precedence?

<style>
.active-scroll-left, .active-scroll-corner {width: 50px}
.active-scroll-top, .active-scroll-data {padding-left: 50px}
</style>

or

obj.setRowHeaderWidth(50);

Normally the script takes precedence as it sets styles directly on DOM element. You can still override it with stylesheet rules if you use !important keyword.

.active-scroll-left, .active-scroll-corner {width: 50px!important;}
.active-scroll-top, .active-scroll-data {padding-left: 50px!important;}

do you know how to change the width of the top header from javascript?

is there a 2.0 version of this code?