How to Check If CSS Calc() Is Available Using JavaScript

How can I check if CSS calc() is available using JavaScript?

In Modernizr you can find the test as css-calc currently in the non-core detects. They use the following code:

Modernizr.addTest('csscalc', function() {
    var prop = 'width:';
    var value = 'calc(10px);';
    var el = document.createElement('div');

    el.style.cssText = prop + Modernizr._prefixes.join(value + prop);

    return !!el.style.length;
});

Can I use CSS calc within Javascript?

Yes, calc() will work when setting styles in javascript.

Working Example:

var innerDiv = document.getElementsByClassName('inner-div')[0];

function growInnerDiv() {
    innerDiv.style.setProperty('width', 'calc(100% + 224px)');
}

innerDiv.addEventListener('click', growInnerDiv, false);

.outer-div {
    display: inline-block;
    width: 200px;
    height: 100px;
    padding: 12px;
    border: 1px solid rgb(255,0,0);
    background-color: rgb(255,255,0);
}

.inner-div {
    width: 100px;
    height: 100px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-align: center;
    line-height: 100px;
    font-family: arial, helvetica, sans-serif;
    background-color: rgb(255,0,0);
    cursor: pointer;
    transition: all 0.5s linear;
}

<div class="outer-div">
    <div class="inner-div">Click Me</div>
<div>

Evaluate CSS calc function in JS

You can get the computed style using Window.getComputedStyle(). Check out the compatibility table.

Then, grab the width and remove the "px" from the result, and parse it to an integer:

let myElement = document.getElementById('child');let width = parseInt(window.getComputedStyle(myElement).width.slice(0, -2), 10);console.log(width);

#parent {  background: red;  height: 100px;  width: 80%;}
#child {  background: green;  height: 60px;  width: calc(100% - 64px);}

<div id="parent">  <div id="child"></div></div>

Issue getting CSS calc width with JS

Two issues. First you need to consider the padding, so add box-sizing:border-box then you defined the width using vw unit, so you will have a sqaure only when you open the page the first time and never resize the browser.

var square = document.getElementById('square');square.style.height = square.clientWidth + 'px';

#square {  background-color: blue;  width: calc(20vw - 16px);  padding: 8px;  box-sizing:border-box;}

<div id="square">Element</div>

Using CSS calc() in JavaScript with a variable

Problem you have is a simple issue with a missing character. Without it, there is no padding, with it there is.

var width = '100px'

var element1 = document.getElementById("test1")var element2 = document.getElementById("test2")
var pad1 = "calc(" + width + "- 90px)";  //what you havevar pad2 = "calc(" + width + " - 90px)"; //what it should be
element1.style.paddingLeft = pad1;element2.style.paddingLeft = pad2;

div {  background-color: red}

<div id="test1">  Hello 1</div><div id="test2">  Hello 2</div><div>  Hello d</div>

Run js function only if CSS class is available

You could try checking if the div exists first.

document.addEventListener("scroll", function(event) {
  // check if exists
  if(document.getElementsByClassName('project1').length > 0)
  {
     //then avoid redundancy/the if statement with a ternary
     pagination1.style.background = inViewport(project1) ? "#e3e3e3" : "transparent";
  }
});

hope this helps

Using CSS property calc() with JS

You need a space after the minus letter :

var displace = childHeight / 2;
$(".test").css({'top': 'calc(50% - ' + displace + 'px)'});

Fiddle here

@supports css calc function

Support for @supports is far, far more restricted than calc() because the latter was introduced several years earlier (most notably, IE doesn't support @supports at all, whereas it has supported calc() since version 9 which came out almost exactly 4 years ago). If you were to use them together, every browser that supports @supports would match that rule, and any browser that supports calc() but not @supports would ignore that rule. In other words, if you were to use them together you'd be reducing the number of browsers that can use the calc() function by preventing some of them from ever seeing your declarations.

Fortunately, since calc() is a value, in lieu of a not-yet-existing @supports authors could simply take advantage of the cascade by providing fallback declarations for when calc() isn't supported:

width: 95px;
width: calc(25% - 20px/4);

Get computed value of CSS variable that uses an expression like calc

Technically you cannot because the computed value is not static and will depend on other properties. In this case it's trivial since we are dealing with pixel value but imagine the case where you will have percentage value. Percentage is relative to other properties so we cannot compute it until it's used with var(). Same logic if we use unit like em, ch, etc

Here is a simple example to illustrate:

let div = document.getElementById('example');console.log(window.getComputedStyle(div).getPropertyValue('--example-var'))console.log(window.getComputedStyle(div).getPropertyValue('font-size'))console.log(window.getComputedStyle(div).getPropertyValue('width'))console.log(window.getComputedStyle(div).getPropertyValue('background-size'));

:root {  --example-var: calc(100% + 5px - 10px);}#example {  font-size:var(--example-var);  width:var(--example-var);  background-size:var(--example-var);}

<div id='example'>some text</div>

---

Related Topics