jcrop css 更新 vline 和 hline

Posted 2023-02-25

【中文标题】jcrop css 更新 vline 和 hline

【英文标题】：jcrop css update vline and hline

【发布时间】：2014-07-21 07:24:20

【问题描述】：

我正在使用 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 中（否则当我手动更改它时它不起作用）。 我的问题是，为什么这不起作用？

【问题讨论】：

如果您可以参考给定的网站，您可以获得有关重要的知识。 ***.com/questions/6129304/important-overridden 。有一些方法可以覆盖重要的。可以使用 set 'attr' 或删除旧类或添加新类。

我不知道这不能被覆盖。当我从原始 css 中删除 !important 时，它起作用了！但我不知道是否有理由将它放在 css 中。我可以尝试设置一个新的属性。感谢您的帮助！

问题是我们不能对同一层次中的元素设置重要，它不会被覆盖。

当您删除原始 css 中的 !important 时它会起作用，因为层次结构级别的问题。

【参考方案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 会覆盖同一层次结构级别的任何内容。