CODEWITHSUNDEEP
htmlcss
Ilya Chernomordik
Ilya Chernomordik

Reputation: 30185

Is it possible to assign style/css to one element based on another element?

I have a 3d party library (fullcalendar) that dynamically assigns height of the elements based on some internal calculations to look nice in any viewport:

<div style="height: 72px;">

However this does not happen for all the elements, some have fixed height. I don't want to change the code of the 3d party library and was thinking if it's maybe possible to somehow "apply" one element's style to another using css. Something like: 

.myDiv {
   height: anotherDiv.height
}

Perhaps there are some other ways of getting the same outcome, but I cannot think of any.

Upvotes: 0

Views: 219

Answers (3)

Francisco Romero
Francisco Romero

Reputation: 13189

I do not know if you are looking for a solution with Javascript (I do not know if it is possible only with CSS but I do not think so) but here is an approach using it:

If you have two divs with two different IDs:

<div id="div1" style="height: 72px;"></div>
<div id="div2"></div>

Then you can read the style property of the first one using getComputedStyle():

var element = document.getElementById('div1'),
    style = window.getComputedStyle(element),
    height1 = style.getPropertyValue('height');

And setting it to the second one:

var div2 = document.getElementById('div2');
div2.style.height = height1;

JSFiddle to see how it works.

Upvotes: 2

SteeveDroz
SteeveDroz

Reputation: 6136

If they are in the same container, you can use a flexbox.

#container {
      display: flex;
      flex-direction: row;
      align-items:stretch /* That line gives them the same height */
    }

#container > * {
  background:gray;
  border:1px solid black;
  margin-right:5px;
}
<div id="container">
      <div>
        Some<br>very<br>high<br>text<br>that<br>uses<br>disgusting<br>BRs
      </div>
      <div>
        The short one
      </div>
    </div>

Upvotes: 0

Lakhvir Singh
Lakhvir Singh

Reputation: 1

By Using Less Its Possible see example

.rounded_corners {
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      border-radius: 8px;
    }

    #header {
      .rounded_corners;
    }

    #footer {
      .rounded_corners;
    }

Upvotes: 0

Related Questions