Question

我有一段这样的css代码：

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 50px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 1px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

现在，如果我想更改Javascript中的border: 1px solid #2f293d;，该怎么办... ???

我尝试过：

var colorA = document.getElementsByClassName("profile img.profilePic")[userA_Index];
colorA.style.border = "1px solid #000";

还有：

var colorA = document.querySelector(".profile img.profilePic")[userA_Index];
colorA.style.border = "1px solid #000"

没有成功。

注意：我已经使用下面的代码进行了样式设置，但是带有边框...

var colorA = document.getElementsByClassName("level")[userA_Index];
colorA.style="font-family:verdana; color:red; font-size:20;"

非常感谢您解决此问题的任何帮助...

Answer 1

 $(".row").css({"border" : "1px solid #000","padding" : "5px"});

You can use JQuery as well

    <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    <script>
      $(".row").css({"border" : "1px solid #000","padding" : "5px"});
    </script>
    <div class="row"> Hello World</div>

Answer 2

解决此问题的另一种方法是创建一个自定义的css类，例如custom-border

img.profilePic.custom-border {
   border: 1px solid #000
}

和javascript

document.querySelector(".profile img.profilePic").classList.add("custom-border");

要避免发生undefined错误，您必须确定querySelector中的路径

https://codepen.io/anon/pen/LvrxyG

Answer 3

因此，您只想更改边框颜色。如果这样，您可以通过“ borderColor”属性轻松实现。请参见以下代码段：

document.querySelector("#setBorder").addEventListener("click", myFunction);

function myFunction() {
  document.querySelector(".profilePic").style.borderColor = "#000";
}

.profile img.profilePic {
  position: aabsolute;
  margin: -50px 70px 50px 50px;
  background: #2f293d;
  border: 1px solid #f00;
  padding: 1px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

<div class="profile">
  <img class="profilePic" src="https://via.placeholder.com/150" />
</div>
<button id="setBorder"> Click on me</button>

如何使用javascript设置边框样式？

3 个答案: