一个div的边框是使用javascript的另一个的颜色

Question

I have this form and several divs in it. The matter is, that color of one div is set with javascript, randomly, and border of another div has to be in one color with first one. It gets even more complicated, because several divs have one class names. Basically, what I mean here is that one house should be of one color, and "roof" depends on content, color of which is set randomly with js. worked on this for quite a long time, but seem to have no solution(

I guess, javascript should look something like this

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

my jfiddle with html and css

Answer 1

If you'd like to keep "Pure" JS, take a look on this approach:

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

Please notice, that getElementsByClassName returns a set of elements which have all the given class names. To access all of them and fill in elements border with ramdom color i can advice you to go in loop throuth them like:

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

Advanced technique is to use jQuery, and correct answer was given above by JustAnil.

Hope it helps. Cheers!