无法更改元素上的剪辑路径属性

Question

所以我有一个带框阴影的按钮，当我点击它时，我想隐藏框阴影的一侧。当我更改初始CSS时，一切都很好，框阴影也可以更改，但当我使用javascript时，我对框阴影所做的任何更改都不起作用。

HTML:

<button class = "ShowWeather" id = "ShowWeather" onclick = "ShowWeather()"></button>

javascript:

function ShowWeather(){
const Forecast = Get("Forecast"); //get just gets an element by id
const Button = Get("ShowWeather");
const slider = Get('forecast_slider');
if(slider.style.height == "0px"){
slider.style.border = "none";
slider.style.height = `${Forecast.getBoundingClientRect().height}px`;
Button.style.borderRadius = "0vw 0vw 0vw 0vw";
Button.style.borderBottom = "none";
Button.style.clipPath = "inset(-1vh -1vh 0vh -1vh);"; //THIS IS THE PROBLEMATIC LINE
} 
else{
slider.style.height = "0px";
Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh);"; //another problematic line
setTimeout(closeWeather, 300);
}
}

CSS：

.ShowWeather{
width: 16.15vw;
background: white;
border-top: none;
padding-top: 1vh;
position: relative;
bottom: 0.8vh;
border-radius: 0vw 0vw 1vw 1vw;
border: none;
box-shadow: 0vh 0.5vh 1vh gray;
clip-path: inset(-1vh -1vh 0vh -1vh);;
}

除了这两条有问题的线之外，所有的东西都能完美地工作，只是更改剪辑路径不起作用。我可能犯了一些小错误，但我已经试着调试这1行代码好几个小时了

Answer 1

您可以尝试删除末尾的分号：

Button.style.clipPath = "inset(-1vh -1vh -1vh -1vh)";