JS edit CSS pixel value

Question

My CSS:

.clip-circle {
  clip-path: circle(10px at center);
}

My HTML:

<img src="" alt="" class="clip-circle" id="pic" >

How do I edit the px value of clip-path whenever a button is pressed ?

JS :

function changeSize (button) {
  var pic = document.getElementById("pic");
  pic.style.WhatDoIWriteHere = "??";
}

Thank you.

score 0 · Answer 1 · answered Aug 08 '21 at 12:08

The property is called clipPath. I haven't found the documentation, but it is quite common that the style property is the same as in CSS just without the hyphen and in camelCase (just like backgroundColor).

var pic = document.getElementById("pic");

pic.addEventListener('click', e => {
  e.target.style.clipPath = "circle(20px at center)";
});

.clip-circle {
  clip-path: circle(10px at center);
}

<img src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+" width="100" height="100" alt="" class="clip-circle" id="pic">

JS edit CSS pixel value

1 Answers1