我正在使用 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 中(否则当我手动更改它时它不会工作)。 我的问题是,为什么这不起作用?
最佳答案
使用 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 会覆盖同一层级的任何内容。
关于jquery - jcrop css 更新 vline 和 hline,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24859648/