JS编辑CSS像素值

Question

我的CSS:

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

我的HTML:

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

如何在按下按钮时编辑clip-path的px值?

JS:

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

谢谢。

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

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