Is there a way to access a value by CSS?

Question

Is there a way to access a value by CSS?

Navigation

#1 by (4 votes)
#2 by (3 votes)

5

I'm trying to fit an image into the css on my site, and I want to extend the image on the whole screen, but for this I have to assign my image: margin-left , to correct screen positioning.

Only the value that I will assign in this field is the sum of the following values, which are the margins of the containers.

$('.row').css('margin-left');
"0px"
$('.article-body').css('margin-left');
"103.875px"
$('.article-body').css('padding-left');
"18.75px"

What I want to know is if in css, I can get these values to do something like this, considering of course that these values will change with the resizing of the screen.

element-style{
  margin-left: '.article-body'.marginleft + '.article...
}

css

asked by anonymous 27.08.2018 / 14:39

2 answers

3

Yes it is possible, but you will need to use calc() and custom variables --var to do this.

I'll make a basic example just to understand how you can add values from different variables and put them in another element. In your case it would be to make a variable for each margin and add them in the margin of another element.

See the example, I put a margin-bottom for the first div , then another margin-bottom for the second div and on the third div I make the sum of the two values of margin-bottom of the first and% second div s. OBS: This is just a didactic example for you to understand the concept.

:root {
  --d1m: 20px; /* valor do margin para a primeira div */
  --d2m: 40px; /* valor do margin para a segunda div */
  --dh: 20px; /* altura das div */
}
.d1, .d2, .d3, .d4 {
  height: var(--dh); /* height de 20px */
}
.d1 {
  background-color: #f00;
  margin-bottom: var(--d1m);
}
.d2 {
  background-color: #ff0;
  margin-bottom: var(--d2m);
}
.d3 {
  background-color: #0f0;
  margin-bottom: calc(var(--d1m) + var(--d2m));  /* valor somado da primeira e segunda div */
}
.d4 {
  background-color: #f0f;
}

  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
  <div class="d4"></div>

About calc() you can read more in this Mozilla documentation link

And about custom variables you can read in the official W3C documentation link or in that response What does - specified in: bootstrap css root?

27.08.2018 / 15:00

EntityManager or Session? Which one to use? UPDATE is a DELETE followed by an INSERT?

score 4 · Accepted Answer

Technically not. But there is a function called calc() , which calculates the values (0px, 0%, 0cm, ..), for example:

.teste{
   margin-left: calc(1px + 3px + 4px, ..)
}

One option is the variables:

:root{
   --nome-variavel: valor;
}

This above excerpt is a statement of the variable in css. And to use the variable, just use the var() method.

It has been declared in :root (html) so we can access it at any time. In your case it would look something like this:

:root{
     --row-margin-left: 0px;
     --article-body-margin-left: 103.875px;
     --article-body-padding-left: 18.75px;
}

.elemento{
     margin-left: calc(var(--row-margin-left) + var(--article-body-margin-left) + var(--article-body-padding-left))
}

This equates to putting the values directly:

.elemento{
     margin-left: calc(0px + 103.875px + 18.75);
}