Question Details

No question body available.

Tags

javascript css dom cssom

Answers (1)

Accepted Answer Available
Accepted Answer
June 8, 2026 Score: 4 Rep: 140,239 Quality: Expert Completeness: 80%

The issue is that by setting the title attribute on your and elements, you are opting in the alternative style sheet mode (MDN link, though the title attribute is hidden in there).
This is a little known feature (at least I didn't know of it before your question), which enables the user-agent to show an option to the user to switch between various themes, directly from the browser's UI.
So, with this feature, you could let the browser handle the switching of the theme itself, by just setting the title attribute to whichever theme name. Then the user would be able to switch the theme from their browser, without any JS. For instance in Firefox it's in View > Page Style > Your theme. Other browsers do require an extension to allow switching, but they still do respect the exposed behavior as mandated by the specs.

And this means that if the user doesn't switch themselves to the theme, it's automatically disabled by the browser, even if you do switch the disabled property off.

So, if you want to control the theme switching through JS (which might be better, since this is a very little known feature, with no browser support), you must not set the title attribute. Instead you could use a data- attribute:

const select = document.querySelector("select");
select.onchange = e => {
  const currentThemeName = select.value;
  for (const styleElem of document.querySelectorAll(":is(link,style)[data-title]")) {
    styleElem.disabled = styleElem.dataset.title !== currentThemeName;
  }
}
select.onchange();
p { border: 1px solid blue }
p { border: 1px solid pink }
  red
  green
I should change color and border.