jquery - 如何在运行时使用 jquery 更改样式属性值

Question

<img>当屏幕尺寸变为 1199px 时，这是我的标签：

<img id='rotateimage' src='images/01/0001.jpg' width='1200' height='700'>

我想改变宽度和高度，例如：width: 1000; height:500当屏幕尺寸变为1199px时减小宽度和高度。

这是正在做的事情，但它不起作用：

if ($screen_width <= 1199){

    $width2 = 1000;
    $height = 500;

}

$("img").attr('width', '$width2');
$("img").attr('height', '$height');

Answer 1

正如其他人所建议的那样，您可以使用该.css()函数来执行此操作，或者您可以在 CSS 中定义媒体查询。

jQuery

function res() {
  if ($window.width() <= 1199) {
    $("#rotateimage").prop("width", 1000).prop("height", 500);
  } else {
    $("#rotateimage").prop("width", 1200).prop("height", 700);
  }
}

$( window ).resize(function() {
  res();
});

CSS 中的媒体查询

#rotateImage {
  width: 1200px;
  height: 700px;
}

 @media only screen and (max-width: 1199px) {
  #rotateImage {
    width: 1000px;
    height: 500px;
  }
}

Answer 2

用于CSS设置图像大小并$("img").css("width");用于修改