0

I have this form, and I want to change the display property of the pseudo-element ::after of the form's child elements.

This is the line I am using to modify the value:

window.getComputedStyle(document.querySelector('.lf-u-container'), '::before').setProperty('display', 'inline');

HTML for form

<form class="loginForm hidden" id="loginForm">
    <div class="lf-heading">Enter Login Credentials <span><u>Create An Account Instead?</u></span></div>
    <div class="lf-container lf-u-container"><input class="lb-username" id="lf-username" name="username" type="text" placeholder="Enter Username"></div>
    <div class="lf-container lf-p-container"><input class="lb-password" id="lf-password" name="password" type="password" placeholder="Enter Password"></div>
    <div class="input-group">
            <label for="lb-StaySignedIn">Stay Signed In?</label>
            <input class="lb-StaySignedIn" type="checkbox">
            <button type="submit" id="loginSubmit"></button>
    </div>
</form>

The problem is that I get an error message saying that

Uncaught DOMException: Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'display' property is read-only.

So, I would like to know how can I modify the property value of pseudo-elements using JavaScript. There are existing solutions with JQuery, but I am using JavaScript only for my project.

consolenine
  • 159
  • 1
  • 11
  • *"There are existing solutions with JQuery, but I am using JavaScript only for my project."* Anything you can do with jQuery, you can do directly with the DOM. (In both cases, you're using JavaScript.) Where are the solutions you refer to? – T.J. Crowder Feb 06 '22 at 14:14
  • AFAIK, you can't set nor edit a pseudo-element directly via JS. I'd like to be wrong on this one but I'm pretty sure you'd need a toggle class or some kind of switch happening on the CSS – savageGoat Feb 06 '22 at 14:24
  • 1
    @savageGoat I think so too, there are some work-arounds but I guess it'd be easier to approach the problem with a different solution. – consolenine Feb 06 '22 at 14:25
  • 1
    @xdeepakv I looked into the answers for that question, and yes! The solutions weren't exactly what I was looking for, but they work the way I want them too. :) – consolenine Feb 06 '22 at 14:31

0 Answers0