在 JavaScript 语言中判断 Web 页面按钮是否置灰（禁用状态），可以通过以下几种方式实现，其具体情形取决于按钮的禁用方式（原生disabled属性或 CSS 样式控制）：

一、检查原生disabled属性

如果按钮是通过 HTML 的disabled属性禁用的（标准方式），可以直接检查该属性：

const button = document.querySelector('button'); // 替换为实际选择器

// 方法1：使用element.disabled属性（返回布尔值）
if (button.disabled) {
  console.log('按钮已禁用（置灰）');
} else {
  console.log('按钮可用');
}

// 方法2：使用element.hasAttribute()检查属性存在性
if (button.hasAttribute('disabled')) {
  console.log('按钮已禁用');
}

二、检查 CSS 样式（适用于无disabled属性但视觉上置灰的按钮）

如果按钮没有设置disabled属性，但通过 CSS 样式（如透明度、背景色）实现置灰效果，可以检查计算后的样式：

const button = document.querySelector('button');
const computedStyle = getComputedStyle(button);

// 检查透明度（常见置灰效果）
if (computedStyle.opacity === '0.5' || computedStyle.opacity === '0.6') {
  console.log('按钮可能被CSS置灰');
}

// 检查鼠标样式（禁用状态通常为not-allowed）
if (computedStyle.cursor === 'not-allowed') {
  console.log('按钮可能被CSS禁用');
}

// 检查背景色（浅灰色可能表示禁用）
if (computedStyle.backgroundColor.includes('rgb(220, 220, 220)') || 
    computedStyle.backgroundColor.includes('#f0f0f0')) {
  console.log('按钮可能被CSS置灰');
}

三、结合属性和样式判断（更健壮的方案）

实际场景中，建议同时检查disabled属性和 CSS 样式，以应对不同实现方式：

function isButtonDisabled(button) {
  // 优先检查原生disabled属性
  if (button.disabled || button.hasAttribute('disabled')) {
    return true;
  }

  // 检查CSS样式（适用于未设置disabled属性但视觉上置灰的情况）
  const computedStyle = getComputedStyle(button);
  return (
    computedStyle.opacity < '0.8' || 
    computedStyle.cursor === 'not-allowed' ||
    computedStyle.pointerEvents === 'none'
  );
}

// 使用示例
const myButton = document.querySelector('#myButton');
if (isButtonDisabled(myButton)) {
  console.log('按钮已禁用或视觉上置灰');
} else {
  console.log('按钮可用');
}

四、处理动态渲染的按钮（如 React/Vue 组件）

对于使用框架动态渲染的按钮，可能需要等待 DOM 更新后再判断：

// 示例：等待按钮加载完成后检查
function checkButtonAfterLoad() {
  const button = document.querySelector('#dynamicButton');
  if (button) {
    console.log('按钮状态:', isButtonDisabled(button) ? '禁用' : '可用');
  } else {
    // 按钮未加载完成，等待一段时间后重试
    setTimeout(checkButtonAfterLoad, 500);
  }
}

checkButtonAfterLoad();

五、注意事项

1. 浏览器兼容性：disabled属性在所有现代浏览器中均支持，但 CSS 样式检查，则需注意不同浏览器的计算值格式（如 RGB、RGBA、十六进制）。
2. 框架差异：React/Vue 等框架可能通过状态管理控制disabled属性，需确保 DOM 已更新。
3. 自定义组件：某些 UI 库（如 Ant Design、Element UI）可能使用自定义类名（如ant-btn-disabled），需结合此类类名进行检查。

// 检查自定义类名示例
if (button.classList.contains('ant-btn-disabled')) {
  console.log('Ant Design按钮已禁用');
}

通过以上方法，可准确判断 Web 页面按钮是否处于置灰（禁用）状态。