2

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.

Anton Harald
  • 5,772
  • 4
  • 27
  • 61

2 Answers2

3

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"})
naomi
  • 2,583
  • 2
  • 22
  • 39
  • there you go. that's the simple sauce I was looking for. – Anton Harald Feb 15 '16 at 17:31
  • When you answered the question, I did not test this. It turned out now, that this doesn't work: document.body.style = {backgroundColor: "red"} in JS does not do the desired thing. why? because document.body.style.constructor != ({}).constructor , it's a CSSStyleDeclaration Object. – Anton Harald Mar 17 '16 at 19:52
0

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")
Asher
  • 1,267
  • 1
  • 12
  • 24