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

【问题标题】：Changing image widths after page had loaded if width is declared already? If width is undeclared, width will change but not if declared as I have如果已经声明了宽度，则在页面加载后更改图像宽度？如果未声明宽度，宽度会改变，但如果像我一样声明则不会改变
【发布时间】：2015-02-09 05:54:02
【问题描述】：

问题是，如果将这些具有生成 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()？即使不是解决方案，也欢迎任何想法。

【问题讨论】：

标签： javascript jquery css addclass classname

【解决方案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; 
}

【讨论】：