CODEWITHSUNDEEP
javascripthtmlcssfrontendweb-frontend
Yousef
Yousef

Reputation: 95

changing repeating linear gradient with Javascript

I want to ask if it's possible to use the setProperty() method into changing the 'repeating-linear-gradient' in css? I seem to be having problems changing the colors of the stripes in CSS. If anyone can help me use the setProperty() method or any other method that will allow me to change the color of stripes then that will be great.

Here is my code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 

 <script src="app2.js"></script>
</body>
</html>

CSS:

body {
    height: 100vh;
    background-image: repeating-linear-gradient(
      45deg,
      #039BE5 0px,
      #039BE5 20px,
      #90CAF9 20px,
      #90CAF9 40px
    );
  }

JS:

let body = document.querySelector('body')
let style = body.style.setProperty('background', `repeating-linear-gradient(
    45deg,
    #000 0px,
    #111 20px,
    #222 20px,
    #333 40px
  );`)

If anyone can help me, that will be much appreciated

Upvotes: 1

Views: 863

Answers (3)

Professor Abronsius
Professor Abronsius

Reputation: 33813

The requirements of the question are a little vague but you can quite easily play around with the colours and layout of your gradient if you assign css variables to the various parameters in the gradient and then access those with Javascript. You use getPropertyValue to read and setProperty to write them.

The following is a bit trippy - anyone with epilepsy should probably not run the snippet! Hope it gives an idea though

// find a reference to the document root and find the style
let root=document.documentElement;
let style=getComputedStyle( root );

// attempt to find the values of the css variables.
let a=parseInt( style.getPropertyValue('--a') );
let p1=parseInt( style.getPropertyValue('--p1') );
let p2=parseInt( style.getPropertyValue('--p2') );
let p3=parseInt( style.getPropertyValue('--p3') );
let c1,c2;

setInterval(()=>{
  // modify variables in some manner - the following
  // does random changes to illustrate the effect.
  a+=5;
  p1+=5;
  p2+=5;
  p3+=5;
  c1=Math.floor(Math.random()*16777215).toString(16);
  c2=Math.floor(Math.random()*16777215).toString(16);


  if( p1 > 20 )p1=10;
  if( p2 > 40 )p2=20;
  if( p3 > 80 )p3=40;

  // assign the new value back to the variable and it will
  // immediately be reflected in the HTML display.
  root.style.setProperty('--a',`${a}deg`);
  root.style.setProperty('--p1',`${p1}px`);
  root.style.setProperty('--p2',`${p2}px`);
  root.style.setProperty('--p3',`${p3}px`);
  root.style.setProperty('--c1',`#${c1}`);
  root.style.setProperty('--c2',`#${c2}`);
},200);
/*
  create the CSS variables to control the gradient
*/
:root{
  --c1:#039BE5;
  --c2:#90CAF9;
  
  --a:45deg;
  --p1:0px;
  --p2:20px;
  --p3:40px;
}

body {
    height: 100vh;
    /*
      assign the variables to the gradient
    */
    background-image: repeating-linear-gradient(
      var(--a),
      var(--c1) var(--p1),
      var(--c1) var(--p2),
      var(--c2) var(--p2),
      var(--c2) var(--p3)
    );
  }

Upvotes: 4

Priyansh Patel
Priyansh Patel

Reputation: 9

**Start with something like the following:**


        var dom = document.getElementById('mainHolder');
    dom.style.backgroundImage = '-moz-linear-gradient('
            + orientation + ', ' + colorOne + ', ' + colorTwo + ')';


**If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.
Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).**

        // Detect which browser prefix to use for the specified CSS value
    // (e.g., background-image: -moz-linear-gradient(...);
    //        background-image:   -o-linear-gradient(...); etc).
    //
    
    function getCssValuePrefix()
    {
        var rtrnVal = '';//default to standard syntax
        var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];
    
        // Create a temporary DOM object for testing
        var dom = document.createElement('div');
    
        for (var i = 0; i < prefixes.length; i++)
        {
            // Attempt to set the style
            dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';
    
            // Detect if the style was successfully set
            if (dom.style.background)
            {
                rtrnVal = prefixes[i];
            }
        }
    
        dom = null;
        delete dom;
    
        return rtrnVal;
    }
    
    // Setting the gradient with the proper prefix
    dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
            + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

Upvotes: 0

Batu.Khan
Batu.Khan

Reputation: 3065

You can do it by directly editing the property itself like :

body.style.backgroundImage = 'repeating-linear-gradient(45deg,#000 0px,#111 20px,#222 20px,#333 40px)';

Upvotes: 0

Related Questions