Is it possible to access styling of elements in css-CodePudding

I was wondering if there was a way to access other properties of an object and of other objects in css for eg:

#smallbox{
  opacity:75%
}

#bigbox{
  width:10vw;
  height:width;
  opacity:#smallbox.opacity
}

CodePudding user response：

Here is a example to use variables.

:root {
  --main-bg-color: brown;
  --accent-bg-color: red;
  --box-height: 100px;
  --box-width: 50px;
}

.one {
  background-color: var(--accent-bg-color);
  width: var(--box-width);
  height: var(--box-height);
}

.two {
  background-color: var(--main-bg-color);
  width: var(--box-width);
  height: var(--box-height);
}

.three {
  background-color: var(--accent-bg-color);
  width: var(--box-width);
  height: var(--box-height);
}

.four {
  background-color:  var(--main-bg-color);
  width: var(--box-width);
  height: var(--box-height);
}

<div ></div>
<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

Though not exactly checking, you could set the values on a parent of the elements and share that information using css variables. You could also check the opacity afterwards using js which I also included a small demo regarding.

const $ = str => [...document.querySelectorAll(str)];
$("div").forEach(box => {
  box.addEventListener("click", async e => {
    const opacity = window.getComputedStyle(e.target).opacity;
    const elClass = e.target.classList[0];
    console.log(`The rendered opacity for ${elClass} is: ${opacity}`);
  });
});

:root {
  --big-box-size: 10rem;
  --big-box-opacity: 0.9;
  --small-box-size: calc(var(--big-box-size) / 2);
}

div {
  height: var(--size);
  width: var(--size);
  border: 5px solid black;
  display: inline-block;
  background-color: var(--bg-color);
  cursor: pointer;
}

.big-box {
  --size: var(--big-box-size);
  opacity: var(--big-box-opacity);
  --bg-color: lightblue;
}

.small-box {
  --size: var(--small-box-size);
  opacity: var(--big-box-opacity);
  --bg-color: gray;
}

<div ></div>
<div ></div>