如何更改JavaScript文件中的CSS属性？

如何解决如何更改JavaScript文件中的CSS属性？

我想知道如何在输入正确的密码后将锁的边框更改为透明透明。

我的JavaScript就是这样，当触发IF时，我需要先锁，然后将值更改为透明透明

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"); 
}
}

我的CSS就是这样，之前需要通过javascript函数将锁定更改为稳定透明。

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;
}

我的HTML就是这样，它所做的只是创建一个按钮和一些文本。

<!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>

解决方法

尝试这样的事情。

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

可以通过使用新的类名称来更改伪元素的样式。例如，一旦输入的密码有效，就将类名unlocked添加到#lock元素中。

您可以为新类添加以下样式：

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

您的脚本以及添加了.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");
  }
}

向按钮添加类或从按钮移除类。伪元素不能直接从JavaScript定位，因此您必须使用CSS来更改样式。

// 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');
    }
}

然后在您的CSS中添加具有所需样式的类。

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

如何更改JavaScript文件中的CSS属性？

如何解决如何更改JavaScript文件中的CSS属性？

解决方法

相关推荐