How do you change a CSS property in a javascript file?

Question

I am wondering how to change the border of lock:before to solid transparent when the correct password is entered.

My JavaScript is like this, I need a lock before value to change to solid transparent when the IF is triggered

function lock(){
    alert("It's locked, you have to guess the password.");
    var pass = prompt("");
    if (pass == "opensesame") {
       alert("Lock opened");
       
    } else {
      alert("Wrong password"); 
}
}

My CSS is like this, lock before needs to be changed to solid transparent by a javascript function.

body {
    position: absolute;
    color: #00ff80;
    background: green;
    top: 100px;
    left: 200px;
}
#lock {
    font-size: 8px;
    position: relative;
    width: 18em;
    height: 13em;
    border-radius: 2em;
    top: 10em;
    box-sizing: border-box;
    border: 3.5em solid red;
    border-right-width: 7.5em;
    border-left-width: 7.5em;
    margin: 0 0 6rem 0;
  }
  #lock:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 2.5em solid red;
    width: 14em;
    height: 12em;
    left: 50%;
    margin-left: -7em;
    top: -12em;
    border-top-left-radius: 7em;
    border-top-right-radius: 7em;
  }
  #lock:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 1em solid red;
    width: 5em;
    height: 8em;
    border-radius: 2.5em;
    left: 50%;
    top: -1em;
    margin-left: -2.5em;
  }
#button {
    background: transparent;
}

My HTML is like this, all it does is make a button and some text.

<!DOCTYPE html>
<html>
    <head>
        <title>The lock</title>
    </head>
    <body>
        <h1>Unlock the lock</h1>
        <button id=button onclick="lock()"><div id=lock></div></button>
    </body>
</html>

Does this answer your question? [How to change css property using javascript](https://stackoverflow.com/questions/15241915/how-to-change-css-property-using-javascript) — JBallin, Nov 10 '20 at 18:12

score 0 · Answer 1 · answered Nov 10 '20 at 18:37

0

Try something like this..

var str = '1em solid transparent';
document.styleSheets[0].addRule('#lock:before','border: "'+str+'";');

answered Nov 10 '20 at 18:37

Amaarockz

4,348
2
9
27

score 0 · Answer 2 · answered Nov 10 '20 at 19:00

the style of a pseudo-element can be changed by using a new class name. For example, add the class name unlocked to the #lock element once the entered password is valid.

You can add the following style for the new class:

#lock.unlocked::before {
  border: 1em solid transparent;
  /* Your style for unlocked goes here */
}

And your script with the new instruction which add the class .unlocked.

function lock() {
  alert("It's locked, you have to guess the password.");
  var pass = prompt("");
  if (pass == "opensesame") {
    alert("Lock opened");
    document.getElementById("lock").classList.add("unlocked"); /* NEW */
  } else {
    alert("Wrong password");
  }
}

score 0 · Answer 3 · answered Nov 10 '20 at 22:03

Add and remove a class to and from the button. Pseudo elements can't be targeting directly from JavaScript so you have to use CSS to change the styling.

// Select the button
const button = document.querySelector('button');

function lock(){
    alert("It's locked, you have to guess the password.");
    var pass = prompt("");
    if (pass == "opensesame") {
       // Add the class.
       button.classList.add('unlocked');
    // If it already has the class..
    } else if (button.classList.contains('unlocked')) {
       //.. then remove it.
       button.classList.remove('unlocked');
    }
}

And in your CSS add the class with the styling you need.

#lock.unlocked::before {
  border: 2.5em solid transparent;
}

How do you change a CSS property in a javascript file?

3 Answers3