一个div的边框使用javascript成为另一个div的颜色答案

【问题标题】：border of one div to be the color of another with javascript一个div的边框使用javascript成为另一个div的颜色
【发布时间】：2013-07-11 12:49:11
【问题描述】：

我有这个表格和几个 div。问题是，一个 div 的颜色是用 javascript 随机设置的，另一个 div 的边框必须与第一个颜色为一种颜色。它变得更加复杂，因为几个 div 有一个类名。基本上我这里的意思是一个房子应该是一种颜色，而“屋顶”取决于内容，颜色是用js随机设置的。研究了很长时间，但似乎没有解决方案（

我猜，javascript 应该是这样的

document.getElementByClassName("roof").style.border-bottom-color = document.getElementByClassName("contents").style.background-color;

我的jfiddle with html and css

【问题讨论】：

它是getElementsByClassName，“元素”后面有一个s。它返回一个数组，您需要对其进行迭代（或获取第一个元素）
也是它的borderBottomColor而不是border-bottom-color。一般规则是，当 CSS 中的属性使用 - 符号时，在 JS 中将其删除并且下一个单词大写。 background-color 也一样，变成了 backgroundColor
你可以使用 jquery 吗？因为所有浏览器都不支持getElementsByClassName。
我会感谢所有针对此问题的有效解决方案。这里不知道怎么应用jquery，我是web编程新手。

标签： javascript css html

【解决方案1】：

如果您想保留“纯”JS，请查看以下方法：

document.getElementsByClassName("roof")[0].style.borderBottomColor = 

getStyle(document.getElementsByClassName("contents")[0], 'backgroundColor');

function getStyle(el,styleProp)
{
    if (el.currentStyle)
        return el.currentStyle[styleProp];

    return document.defaultView.getComputedStyle(el,null)[styleProp];
}

请注意，getElementsByClassName 返回一组具有所有给定类名的元素。要访问所有这些并用随机颜色填充元素边框，我可以建议您像这样循环访问它们：

var yourElements = document.getElementsByClassName('className');
for(var i=0; i<yourElements.length; i++) { 
  yourElements[i].style.borderColor= "#RANDOM_COLOR";
}

高级技巧是使用jQuery，上面JustAnil给出了正确答案。

希望对您有所帮助。干杯！

【讨论】：

干得好。我也在寻找如何在纯 js 中做到这一点，但你打败了我。 +1
这是他发布的示例。我对其进行了一些更改，并将用于更改颜色的代码放入循环中，但这是@Ignat B. 使用的。 jsfiddle.net/zaEnZ/38
干杯@Pete D，这个问题对我来说也是一个挑战。感谢您的更新！
谢谢！我从没想过会在这里找到来自乌克兰的人）