I was able to play around and get it working in a general sense. I think you can see what I'm doing easy enough. Instead of setting the placeholder color as a specific color value, you set it to a custom property (variable). Then you can use JS to manipulate the custom property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#text-area {
--color: blue;
}
#text-area::placeholder {
color: var(--color);
}
</style>
</head>
<body>
<textarea name="textArea" id="text-area" placeholder="My Text"></textarea><br>
<button onclick="btnHandler()">Click Me</button>
<script>
function btnHandler() {
var ta = document.querySelector("#text-area");
ta.style.setProperty('--color', "red")
}
</script>
</body>
</html>