om/react: manipulate elements outside the render target element

Question

I'm using om as a clojurescript react interface.

One question, which I guess relates to both om and react:

Inside my html body I have a div of the id "app", which is used for om/react as a render target.

What would be a prefered way to change attributes outside of this element. more concretely I need to set some stylesheets to the body.

Now, more clojure specific:

How do you set multiple key-value pairs to a javascript object. (e.g. document.body.style)

I'm using this:

(doseq [[k v] {"backgroundColor" "red" "overflow" "hidden" ...}]
   (aset js/document.body.style k v))

There was a nice way to do so with underscore.js:

_.extend(document.body.style, {"backgroundColor": "red" "overflow": "hidden"})

Well, but this was the question here. Maybe it's not really needed because there is a special om/react way to go.

Answer 1

A nicer way to do this is simply set the body style with a javascript object containing all key-value pairs:

(set! (.. js/document -body -style) #js {:backgroundColor "red" :overflow "hidden"})

Answer 2

The solution provided by Naomi is great, but it uses the bad practice of inline css. Instead of setting the actual css styles in code, I would set a class to the desired html object, and in the styles sheets define the css properties of that class.

For example:

(set! (.. js/document -body -className) "my-class")