动态设置元素宽度失效求助：无法覆盖内联样式实现宽高一致

JS代码失效原因 #

你用jQuery的.css()方法设置宽度时加了!important，但这个方法不支持直接在属性值里写!important，导致这行代码根本没生效——jQuery会忽略这个!important，相当于没设置宽度。

修正后的JS方案 #

可以用两种方式实现：

方式1：直接修改style属性 #

用attr()方法直接覆盖内联样式，把!important写进去：

var vidiFrameHeight = $(".fancybox-content").outerHeight();
$(".fancybox-content").attr("style", function(i, oldStyle) {
  // 保留原有height样式，替换width
  return oldStyle.replace(/width:\s*[^;]+;/, '') + `width: ${vidiFrameHeight}px !important;`;
});

方式2：不用!important，确保执行时机 #

如果能保证你的JS代码在第三方设置内联样式之后执行，可以直接去掉!important，因为后设置的内联样式会覆盖之前的：

var vidiFrameHeight = $(".fancybox-content").outerHeight();
$(".fancybox-content").css("width", vidiFrameHeight + "px");

CSS方案（结合makeMeSquare类） #

CSS本身没法直接读取元素的高度值来设置宽度，但可以用以下技巧实现宽高一致：

方法1：利用aspect-ratio（现代浏览器支持） #

如果你的目标浏览器支持CSS aspect-ratio属性（绝大多数现代浏览器都支持），可以给.makeMeSquare加这个样式，强制元素宽高比1:1，这样宽度会自动匹配高度：

.makeMeSquare {
  aspect-ratio: 1/1 !important;
  width: auto !important; /* 让宽度由高度和比例决定 */
}

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