Question

这是匹配两个div的正确方法吗？

var div2 = document.getElementsByClassName("div2");
div2.style.borderRadius = "100px"

document.getElementById("div1").style.borderRadius = div2.style.borderRadius;

只是javascript的新手。

Answer 1

你缺少的是，document.getElementsByClassName("div2");返回所有元素的类似ARRAY的对象，这些元素具有所有给定的类名，而不是直接引用。

以这种方式使用，

var div2 = document.getElementsByClassName("d2");
div2[0].style.borderRadius = "100px";

document.getElementById("d1").style.borderRadius = div2[0].style.borderRadius;

检查这个Jsfiddle：http://jsfiddle.net/ft1Ljggn/8/

Answer 2

为了评论您的代码，document.getElementsByClassName()返回一个HTMLCollection，而不是一个DOM元素。如果您尝试获取一个元素，则应使用document.getElementById()或document.querySelector()。

除非您想要使用的样式是动态的，否则您通常不希望使用JS来添加样式。对于这种情况，您应该使用CSS文件并添加一个类：

.round-border {
  border-radius: 100px;
}

如果您仍想使用JS添加类而不是将其放入HTML中，您可以执行以下操作：

document.getElementById("div1").classList.add('round-border');
document.getElementById("div2").classList.add('round-border');

这假设您为HTML元素指定了正确的ID名称。

但就像我说的那样，因为你使用的是静态值100px，所以将这个类添加到HTML文件中的元素会更有意义。

Answer 3

获取ID以及此代码以下..

var target = document.getElementById（＆＃34; div1＆＃34;）; target.style.borderRadius =＆＃34; 100px＆＃34 ;;

Answer 4

这是一个单行代码，希望它有所帮助：

div1.style.borderRadius = window.getComputedStyle(div2).getPropertyValue('border-radius');

<强> FIDDLE

您可以使用getComputedStyle和getPropertyValue来实现两个属性的比较。你不需要付出额外的努力就可以将数组逻辑放入其中。

Answer 5

瓦伦的回答很好;另一种方法，特别是如果你想拥有更多类似风格的DIV，或者有更多常见属性，比如颜色/边框等，就是定义一个CSS类，并将该类应用于DIV，例如。

<html>
<head>
<style>
  .roundedcorners{
    border-radius:100px;
    border: 2px solid #8AC007; 
  }
</style>
</head>
<body>
  <div id="div1" class="roundedcorners">Content 1</div>
  <div id="div2" class="roundedcorners">Content 2</div>
</body>
</html>

您仍然可以在各个DIV上设置位置，大小等（如果您愿意，甚至可以重叠它们。）

你怎么得到两个div有相同的borderRadius？

5 个答案: