Question 216749 in Html Question posted in
Some basic documentation can be found here.

Html – How to select a Selector in CSS file by JS

I have this selector in my CSS file. I want to remove it from CSS file with JS. I have the exact DOM element which is Equal to the CSS selector .debtor-content label[for=amount].

CSS code is for the pointed text

I am making an app with JS.

//CSS
.debtor-content label[for=amount]::after
{
  content: 'Insufficient Money';
  font-size: 10px;
  font-weight: bold;
  color: red;
  margin-left: 6px;
  background-color: yellow;
  padding: 1px 2px;

  position: absolute;
  top: 46px;
  right: 58px;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I didn't find a solution as I wanted, something like this:

    document.querySelector('.debtor-content label[for=amount]::after').style.display = 'none';

    but instead i found this:

    :root{
 --display-state: none;
}

.debtor-content label[for=amount]::after{
  content: 'Insufficient Money';
  font-size: 10px;
  font-weight: bold;
  color: red;
  margin-left: 6px;
  background-color: yellow;
  padding: 1px 2px;

  position: absolute;
  top: 46px;
  right: 58px;

 //new code
  display: var(--display-state);
}

    js:

    document.querySelector(':root').style.setProperty('--display-state', 'block');

    thanks all for helping me.


  2. 0

    I am also not sure about the motivation and whether this is the right solution of your problem, but if you really need to alter the style with JavaScript, you can sift through all rules of all styleSheets and then "put the display to none" for some:

    for (const sheet of document.styleSheets)
  for (const rule of sheet.rules)
    if (rule?.selectorText?.endsWith('::after'))
      rule.style.setProperty('display', 'none')
    p::before { content: "H" }
p::after { content: "o" } /* <- will be removed by JS */
    <p>ell</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search