Chrome代码片段中仅能修改元素id，其他属性无法更改的问题求助

Alright, let's break down why most of your property updates aren't working as expected, and fix each one step by step:

1. readonly and disabled not taking effect #

First off, these properties only matter for form control elements—think <input>, <textarea>, <select>, or <button>. If your #foo element is a <div>, <p>, or something else non-form-related, setting these will do absolutely nothing (they don't even exist on those elements).

Even if it is a form control, double-check two things:

• Did you confirm the element actually exists before modifying it? It's easy to typo an ID, so add a quick safety check:

  const elem = document.getElementById('foo');
  if (!elem) {
    console.error('Whoops, element with ID "foo" doesn\'t exist!');
    return;
  }
  

• Are there other scripts on the page that might be overwriting readonly/disabled right after your code runs? Some sites have dynamic scripts that reset form states.

2. Custom aaa property not showing up in HTML #

When you do elem.aaa = '123', you're adding a JavaScript-only property to the element object—this won't update the actual HTML attributes you see in DevTools. If you want that attribute to appear in the DOM (like <div id="123" aaa="123">), use setAttribute instead:

elem.setAttribute('aaa', '123');

Or, if you're following best practices for custom attributes, use the dataset API (this adds a data- prefix, which is standard):

elem.dataset.aaa = '123';
// This will render as `data-aaa="123"` in the HTML

3. onClick not doing anything #

You've got a capitalization mistake here! DOM event handler properties are lowercase: onclick, not onClick. Also, assigning a string like '123' won't work—you need to assign a function (either an inline function or a reference to a function).

Even better, skip the onclick property entirely and use addEventListener (it's more flexible, especially if multiple scripts need to attach click handlers):

// Quick fix with onclick property
elem.onclick = () => console.log('Element clicked!');

// Better practice with addEventListener
elem.addEventListener('click', () => {
  console.log('Element clicked via event listener!');
});

4. Why id worked perfectly #

id is a core, standard DOM property that exists on every HTML element. Directly assigning a value to it is straightforward and reliable—no gotchas here, as long as the element exists.

Full Revised Code #

Here's a cleaned-up version of your code with all fixes included:

const elem = document.getElementById('foo');

if (!elem) {
  console.error('Element with ID "foo" not found!');
} else {
  // Only adjust readonly/disabled if it's a form control
  const validFormTags = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'];
  if (validFormTags.includes(elem.tagName)) {
    elem.readOnly = false;
    elem.disabled = false;
  }

  // Set custom attribute
  elem.setAttribute('aaa', '123');

  // Add click handler
  elem.addEventListener('click', () => {
    console.log('Clicked!');
  });

  // Update ID
  elem.id = '123';
}

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