如何根据屏幕尺寸设置HTML属性？调整mat-progress-spinner直径

1. 修复jQuery调用错误 #

你用$('#matspin').setAttribute('diameter','60')无效，核心原因是$('#matspin')返回的是jQuery对象，而setAttribute是原生DOM元素的方法。可以通过两种方式修正：

• 转成原生元素调用：

$('#matspin')[0].setAttribute('diameter', '60');

• 用jQuery自带的attr()方法：

$('#matspin').attr('diameter', '60');

2. 正确实现屏幕尺寸判断逻辑 #

直接在HTML属性里写(screen.width < 1024)? 60 : 100通常不生效，因为普通HTML不支持直接执行JS表达式。需要在JS里完成判断后再设置属性，同时要考虑窗口大小变化时的更新：

// 页面加载时初始化
$(document).ready(function() {
  updateSpinnerSize();
});

// 窗口 resize 时同步更新
$(window).resize(function() {
  updateSpinnerSize();
});

function updateSpinnerSize() {
  // 用window.innerWidth更准确，它获取的是浏览器视口宽度（排除工具栏）
  const diameter = window.innerWidth < 1024 ? 60 : 100;
  $('#matspin').attr('diameter', diameter);
}

3. 框架场景额外提示 #

如果是Angular Material的mat-spinner，更推荐用组件属性绑定的方式：在组件类里定义spinnerDiameter变量，模板里写[diameter]="spinnerDiameter"，然后在ngOnInit和窗口resize事件里更新这个变量，这样更符合框架规范。

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