I'm working on a CSS Animation, and I'd like to set some parameters in the Custom CSS properties field of the Browser source. If I have this in the Custom CSS field of the Browser source's properties:
I can access the CSS variables in the inline CSS in the HTML file as
It doesn't work. I can replace the
Am I missing something? Or is this something that could be changed in OBS?
Code:
body {
--name: "My Name" ;
--name-color: orange ;
}
I can access the CSS variables in the inline CSS in the HTML file as
var(--name-color)
and it works fine. But if I want to use the name as text and do the usual Javascript in the HTML's div:
Code:
<script>
var db = getComputedStyle(document.body) ;
document.getElementById('name').innerHTML = db.getPropertyValue("--name").slice(2, -2) ;
</script>
It doesn't work. I can replace the
db.getPropertyValue...
with a literal string and it works, and if I move the body
inline -- i.e. from the Browser source Custom CSS into the HTML file itself -- it works as coded, above. I've tried everything I can think of, but it appears that Javascript in the HTML file cannot see variables set in OBS' Browser source Custom CSS.Am I missing something? Or is this something that could be changed in OBS?