JS编辑CSS像素值[重复]

【问题标题】：JS edit CSS pixel value [duplicate]JS编辑CSS像素值[重复]
【发布时间】：2021-08-08 11:46:06
【问题描述】：

我的 CSS：

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

我的 HTML：

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

每当按下按钮时，如何编辑剪辑路径的px 值？

JS：

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

谢谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

该属性名为clipPath。我还没有找到文档，但很常见的是 style 属性与 CSS 中的相同，只是没有连字符和 camelCase（就像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);
}

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

【讨论】：