[SugarCube2]Accessing custom styles through JS

Question

Is there any way to do that? For example if I create a custom style like this in StyleSheet:
#style { color: black; }

And then I use it in passages like this:
@@#style; Text in black@@

I want to be able to change every text styled with "#style" from black to e.g. orange. Is there any way to access #style through JavaScript to change it's color? And if not, how can I easily achieve the effect of different text colors in the same passages, dependent on a variable?

Answer 1

You can use jQuery's css() method to change various css properties: 

$('#style').css('color', 'orange');

Inside your passage, though, you'll need to pair this with a task object like postdisplay to get it to work, since the DOM won't be rendered yet when the code is parsed. 

For example: 

@@#style; Some text.@@

<<script>>
  postdisplay['change-style'] = function (t) {
    delete postdisplay[t]; // single use task
    $('#style').css('color', 'orange');
  };
<</script>>