javascript - 如果已经声明了宽度，则在页面加载后更改图像宽度？如果未声明宽度，宽度将会改变，但如果像我一样声明则不会

Question

问题是，如果将这些带有生成 ID“cam_snap_XXX”的图像拖放到该区域，我需要它们变成不同的宽度。我可以更改高度但不能更改宽度，因为如果 x==1，宽度指定为 20px。从来没有指定图像高度，因此我相信这是它可变的原因？问:如果“拖动”，如何使这些图像宽度从 20px 变为 100px？

while (cnt <= 100) {
    cam_icon=document.getElementById('cam_snap_' + cnt);
    cam_icon.style.visibility = 'hidden';
    if (x==1) { 
        cam_icon.style.width = '20px';
        cam_icon.style.visibility = 'visible'; 
    }
    cnt++;
}

高度从以下javascript改变...

//js for adding class "dragged" which gives new height and width image parameters
$('.droparea td.drop').droppable({
  onDrag: function (e, source) {
      $(this).addClass('dragged'); //Changes height correctly not width though.
  }
}

还有CSS..

//css for attempting to change image width and height on drop
.dragged{
    height: 100px; //Works because height stretches image height from ~20px to 100px.
    width: 100px; //**Doesn't work and is useless because width remains 20px.**
}

在向这些图像添加类“拖动”之前，我是否应该尝试删除该类？使用 removeClass()？欢迎任何想法，即使不是解决方案。

Answer 1

这部分 javascript 会修改您的 HTML

cam_icon.style.width = '20px';
cam_icon.style.visibility = 'visible'; 

到

<someTag id="cam_snap_x" style="width:20px;visibility:visible">

根据 css 规则，内联样式(在 HTML 元素内)具有最高优先级。因此您必须更改属性值才能看到 UI 中的更改。

解决方案 1:更改您的 onDrag 函数，如下所示。

$('.droparea td.drop').droppable({
  onDrag: function (e, source) {
      $(this).width(100).height(100); //This will change the style property
  }
}

解决方案 2:使用 !important将类中指定的值优先于内联样式属性

.dragged{
    height: 100px; 
    width: 100px !important; 
}