Re: Binding a JavsScript object that's not part of the DOM
Does it live update to when the style changes? That's one of the benefits CSSStyleDeclaration is that if you change the CSS for an object, you don't need to query for the style declaration again.
Re: Binding a JavsScript object that's not part of the DOM
I feel that it should be part of the dom even if its not. You might get a way with just using div.getBoundingClientRect(). I had the same issue. So I added that to the dom.nim. The getComputedStyle() slightly different. I found dom.nim to be a clean example to how to bind to stuff in js that is or is not part of the dom: [https://github.com/nim-lang/Nim/blob/master/lib/js/dom.nim](https://github.com/nim-lang/Nim/blob/master/lib/js/dom.nim)
Re: Binding a JavsScript object that's not part of the DOM
I figured out how to do this. [yglukhov's jsbind](https://github.com/yglukhov/jsbind) worked like a charm to help with this. Thanks for the awesome library! Here is a simple to get & set the height of a in Nim. import dom import jsbind type CSSStyleDeclaration* = ref object of JSObj proc cssText*(cssSD: CSSStyleDeclaration): cstring {.jsimportProp.} proc length*(cssSD: CSSStyleDeclaration): int {.jsimportProp.} proc getComputedStyle*(w: Window; element: Element; pseudoElt: Element=nil): CSSStyleDeclaration {.jsimport.} proc getPropertyValue*(cssSD: CSSStyleDeclaration; property: cstring): cstring {.jsimport.} # Main Program proc main() = var content = querySelector("#content") cStyle = window.getComputedStyle(content) content.innerHTML = cStyle.getPropertyValue("height") # e.g. will say something like "51.2px" content.style.height = "800px"
Binding a JavsScript object that's not part of the DOM
I'm writing an app right now and I need to figure out what the width & height of div, with it's applied CSS styling. Back in vanilla JS, there is the function [getComputedStyle()](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) which will give me [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) object. That object is not part of the DOM or the BOM, it's part of the CSSOM. I don't really know how to bind this. How would I go about this?