JavaScript code doesn't change style in HTML page - Stack Overflow

admin管理员组

文章数量:1221402

I'm new to webDev and to JavaScript. I'll preface by saying that I tried to look for (a lot of) similar question but it was just people getting the grammar wrong.

I was annoyed at a particular page not making stuff selectable, so I tried making an extension that changes the " user-select : "none" " to " user-select : "contain" " (chrome).

my extension runs this

    const elements = document.querySelectorAll("*[style]");


elements.forEach((element) => {
  const userSelect = element.style.userSelect;
  const flex = element.style.flex;

  //select by style because Objects have no id there and classes change everytime you reload for some reasons.

  if (userSelect === "none" && flex === "1 1 0%") {
    console.log(element.className + "was changed, the complete style was" + 
    element.style);
    element.style.userSelect = "contain";
    element.style.setProperty('user-select', 'contain');
    console.log("new style is " + element.style.cssText);
    //tried both out of desperation, log is unchanged
  }
});

the console log keeps returning the correct element but when i press F12 the "user-select" attribute is unchanged, the script runs way after the page is loaded.

I even tried running this out of desperation

element.style.cssText = element.style.cssText.replace("user-select: none", "user-select: contain");
        console.log("after the replace it is " + element.style.cssText);

and the "user-select" attribute just disappears from the style.

If I change it manually to "user-select : contain" from the F12 window I can correctly select everything I want.

I'm new to this but completely lost. Also sorry for writing so much

I'm new to webDev and to JavaScript. I'll preface by saying that I tried to look for (a lot of) similar question but it was just people getting the grammar wrong.

I was annoyed at a particular page not making stuff selectable, so I tried making an extension that changes the " user-select : "none" " to " user-select : "contain" " (chrome).

my extension runs this

    const elements = document.querySelectorAll("*[style]");


elements.forEach((element) => {
  const userSelect = element.style.userSelect;
  const flex = element.style.flex;

  //select by style because Objects have no id there and classes change everytime you reload for some reasons.

  if (userSelect === "none" && flex === "1 1 0%") {
    console.log(element.className + "was changed, the complete style was" + 
    element.style);
    element.style.userSelect = "contain";
    element.style.setProperty('user-select', 'contain');
    console.log("new style is " + element.style.cssText);
    //tried both out of desperation, log is unchanged
  }
});

the console log keeps returning the correct element but when i press F12 the "user-select" attribute is unchanged, the script runs way after the page is loaded.

I even tried running this out of desperation

element.style.cssText = element.style.cssText.replace("user-select: none", "user-select: contain");
        console.log("after the replace it is " + element.style.cssText);

and the "user-select" attribute just disappears from the style.

If I change it manually to "user-select : contain" from the F12 window I can correctly select everything I want.

I'm new to this but completely lost. Also sorry for writing so much

• javascript
• html
• css
• google-chrome-extension

Share Improve this question Follow edited Feb 7 at 2:34 NoobProgrammer asked Feb 7 at 2:27 NoobProgrammerNoobProgrammer 7066 bronze badges 4

• Note here that contain, although defined, is not implemented in any browsers. developer.mozilla.org/en-US/docs/Web/CSS/user-select – Tim Roberts Commented Feb 7 at 2:32
• @TimRoberts If I change it manually to "user-select: contain" I can select everything as I want though – NoobProgrammer Commented Feb 7 at 2:33
• 1 Depending on what the page is and what they're trying to protect, they also might have code forcing this back to "none". – Tim Roberts Commented Feb 7 at 2:34
• @TimRoberts would it block the manual change too? Because I can change it manually with no issues – NoobProgrammer Commented Feb 7 at 2:35

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I see what’s happening! The issue is that your script is trying to modify styles using element.style, but that only works for inline styles—and most of the time, user-select: none is applied through CSS stylesheets, not inline styles. That’s why your changes aren’t sticking.

Why isn’t it working?

1. element.style.userSelect only affects inline styles. If user-select: none comes from an external CSS file, element.style.userSelect won’t see it at all.
2. Even element.style.cssText.replace(...) won’t help, because it doesn’t affect styles defined in a stylesheet.
3. DevTools (F12) shows "computed styles," not inline styles. You might see user-select: none in DevTools, but that doesn’t mean it’s an inline style.

How to Fix

Instead of modifying styles element-by-element, you should inject a new global CSS rule that overrides the existing one.

const style = document.createElement('style');
style.innerHTML = `* { user-select: contain !important; }`;
document.head.appendChild(style);

本文标签： JavaScript code doesn39t change style in HTML pageStack Overflow