Browser source CustomCSS not visible to Javascript?

wfolta

New Member
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:

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?
 

wfolta

New Member
I can't seem to edit, and wanted to add the detail that the HTML file is a local file. There are no remote servers involved. I have a local file: that's HTML and the Browser Source's Properties' Custom CSS and that's it. My searches have found a bunch of issues with remote servers (firewalls, etc), but this is entirely on my local machine.
 
Top