changing repeating linear gradient with Javascript

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)
    );
  }

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)';

**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 + ')';