Is there any way to access a CSS value?

Asked

Viewed 544 times

5

I’m trying to adjust a css image on my site, and I want to extend the image on the whole screen, only for that I have to assign to my image: margin-left, to correct the positioning of the screen.

However, the value I will assign in this field is the sum of the sequential values, which are the container margins.

$('.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 take these values to do something like this, considering of course that these values will change with screen resizing.

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

    You can’t. But if the image will extend all over the screen, why not width 100%?

  • I did it, but the father is limited by those shores, I set the width: 100vw;
 max-width: initial; to put the image in the size I want , only that the margen still plays it to the right.

  • The detail is that if I put 100% the image size is limited by Row.

  • From what I understand, if I understand it, your problem is not with the margins... what you are trying to do is probably a gambit to fix another problem that you have not yet identified and that should be corrected...

  • Yes, it’s a problem that I’m trying to fix, but I thought about this solution and since I’m a beginner in css, I was wondering if it’s possible to do this kind of thing.

  • Maybe if you put all the code in the menu and css, it’s clearer for us!

  • My own doubt was this, I even thought to put the code of the problem itself, but it’s too much code and I would have to simplify.

Show 2 more comments

2 answers

4


Not technically. But there is a function called calc(), calculating the values (0px, 0%, 0cm, ..), for example:

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

One option is the variables: 

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

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

It was stated in the :root (html) so that we can access it at any time. In your case would look more or less 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 is equivalent to putting the values directly:

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

  • Well cool, I think we had the same idea! Just missed a "px" there in the "18.75"

  • 1

    Vdd, I can’t think of anything more dynamic than that. Thanks for finding the error!

3

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

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

Look at the example, I put a margin-bottom to the first div, then another margin-bottom to the second div and the third div I make the sum of the two values of margin-bottom of the first and second divs. 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 the calc() you can read more in this Mozilla documentation https://developer.mozilla.org/en-US/docs/Web/CSS/calc

What about the custom variables you can read in the official W3C documentation https://www.w3.org/TR/css-variables-1/#Defining-variables or in that reply What does -- specified in bootstrap css :root mean?

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.