如何用jQuery优雅操作元素style属性实现div宽高互换？

你完全不用纠结正则解析style这种麻烦事！jQuery其实给我们提供了非常便捷的css()方法，专门用来操作元素的样式属性——不管是内联的style还是外部样式表定义的，都能轻松搞定。

针对你的需求，具体可以这么写：

// 选中目标div元素
var $mydiv = $('#my_table').find('div.myclass');
// 获取当前的宽高（会返回带单位的字符串，比如"320px"）
var currentHeight = $mydiv.css('height');
var currentWidth = $mydiv.css('width');
// 一键互换宽高
$mydiv.css({
  'height': currentWidth,
  'width': currentHeight
});

如果你的style里写的是不带单位的数值（比如你例子里的height: 480; width: 320）也没关系，jQuery会自动默认补充px单位，不过更规范的写法还是在style里明确加上单位哦。

另外还有个更简洁的写法，如果你只需要纯数字的尺寸（不带单位），可以用jQuery的height()和width()方法，它们直接返回数字值，计算起来更方便：

var $mydiv = $('#my_table').find('div.myclass');
var heightNum = $mydiv.height();
var widthNum = $mydiv.width();
// 链式调用完成互换
$mydiv.height(widthNum).width(heightNum);

这样是不是比正则解析style字符串优雅太多啦？完全不用去折腾那些复杂的匹配逻辑～

内容的提问来源于stack exchange，提问作者Paul