jquery - jcrop css 更新 vline 和 hline

Question

我正在使用 Jcrop 插件裁剪图像，但对 jQuery 了解不多。我需要根据单选按钮选择动态更改选择边框。在 css 中有一个选择边框宽度的属性(.jcrop-vline 和 .jcrop-hline)。如果我手动将宽度更改为“10px !important”，一切正常。

现在我想用 Jquery 更改 width 属性，但它没有做任何事情，这是我的一段代码，(如果您需要更多代码，请告诉我):

原始CSS:

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

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

还有我的 html 文件中的 jQuery:

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

我添加了警报以检查代码是否已执行，警报是否有效。但是 jcrop-vline 宽度属性不会改变。 css 文件包含在我的 html 中(否则当我手动更改它时它不会工作)。我的问题是，为什么这不起作用？

Answer 1

使用 jquery 覆盖重要的方法。

1.使用属性:

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

2.使用新类

<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.删除类:

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

4.每个函数

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

为什么不能覆盖重要的:

!important 会覆盖同一层级的任何内容。