Question

我的div定义如下：

<div class="myclass" style="position: relative; height: 480; width: 320">

我想用jQuery旋转它。如果是像iframe这样的东西，它具有height和'width`属性，我会这样处理：

var $mydiv = $('#my_table').find('div.myclass');
var height = mydiv.attr('height');
var width = mydiv.attr('width');

$mydiv.attr('height', width);
$mydiv.attr('width', height);

但是我无法使用style attr来做到这一点。看起来我必须复制style属性的所有内容，并使用正则表达式进行解析，如下所示。看起来不太好。

我不擅长jQuery / js，因此无法发现：是否有更好和干净的方法来处理style属性？

Answer 1

您可以像这样更改CSS：

var height = $('.myClass').css('width');
var width = $('.myClass').css('height');

$('.myClass').css({
   'width': height,
   'height': width
});

Answer 2

要设置指定的CSS属性，请使用以下语法：css（“ propertyname”，“ value”）; 例如：

$(".myclass").css("height", "400");

Answer 3

如果您想更改块的“宽度”和“高度”，您已经有答案了，但是如果您想旋转块的内容，css中的函数translate（）可以为您提供帮助。详细地： https://www.w3schools.com/css/css3_2dtransforms.asp

.myClass{
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);
}

将元素样式属性的部分分开

3 个答案: