jcrop css update vline and hline

Question

I'm working with the Jcrop plugin to crop an image but don't have a huge knowledge about jQuery. I need to have the selection borders changed dynamic based on a radiobutton selection. In the css there is a property for the selection-border width (.jcrop-vline and .jcrop-hline). If I change the width manually to "10px !important" it all works fine.

Now I want to change the width property with Jquery but it doesn't do anything, here's a piece of my code, (just let me know if you need more code):

Original css:

.jcrop-vline {
  height: 100%;
  width: 1px !important;
}

.jcrop-hline {
  height: 1px !important;
  width: 100%;
}

And the jQuery in my html file:

<script type="text/javascript">
$('#size').change(function(){
  $('.jcrop-vline').css('width', '10px !important');
  alert('Test');
})
</script>

I've added the alert to check if the code is executed, and the alert works. But the jcrop-vline width property doesn't change. The css file is included in my html (else it wouldn't work when I change it manually). My question is, why does this not work?

Answer 1

Ways to override the important using jquery.

1.using attr:

$('.jcrop-vline').attr('style', 'width: 10px !important;');​

2.using new class

<style type="text/css">
    .jcrop-vline {
       height: 100%;
       width: 1px !important;
     }
    .jcrop-vline1 {
       height: 100%;
       width: 10px !important;
     }
    </style>

$('unique id').removeClass('jcrop-vline').addClass('jcrop-vline1'); 

3.removeclass:

$('unique id.jcrop-vline').removeClass('jcrop-vline').css('width', '10px');

4.each function

$( '.jcrop-vline' ).each(function () {
   this.style.setProperty( 'width', '10px', 'important' );
});

why cannot override the important:

!important does over ride anything at the same hierarchy-level.