cssText

In this example below you will see how to do a cssText with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by isaacalves, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright isaacalves ©
  • HTML
  • CSS
  • JavaScript
    <div id="static">
   <img class="k1" src="http://placekitten.com/500/600" alt="" />
  <img class="k2" src="http://placekitten.com/500/600" alt="" />
</div>
<br />
<div id="app">

/*Downloaded from https://www.codeseek.co/isaacalves/csstext-GQRZLE */
    * {
  margin: 0;
}

img {
  display: block;
  float: left;
}

img.k1,
img.k2 {
  width: 240px;
}

#static {
  overflow: auto;
}



/*Downloaded from https://www.codeseek.co/isaacalves/csstext-GQRZLE */
    window.addEventListener('load', (e) => {
  
  // static
  
  var k2 = document.querySelector('img.k2');
  
  // this will NOT override CSS styles from stylesheet
  k2.style.cssText = `-webkit-clip-path: circle(100px at 120px 120px)`;
  
   // dynamic
  
  const app = document.getElementById('app'); 
  var j1 = document.createElement("img");
  var j2 = document.createElement("img");
  j1.src = 'http://placekitten.com/500/600';
  j2.src = 'http://placekitten.com/500/600';
  app.appendChild(j1);
  app.appendChild(j2);
   
  j1.style.width = '240px';

  j2.style.width = '240px';
  
  // this WILL OVERRIDE CSS styles set in JS (e.g. width)
  j2.style.cssText += `-webkit-clip-path: circle(100px at 120px 120px)`;w
})

Comments