在Scala.js中，如何切换类中元素的可见性？

Question

In a Scala.js program, I want to toggle the visibility of all elements on the HTML page in the class "my-img". What I have so far is

import org.scalajs.dom
import dom.document

val elems: dom.NodeList = document.getElemsByClassName("my-img")
for (i <- 0 until elems.length) {
   val e: dom.Node = elems(i)
   e.style.display = "none"  <-- this chokes, says style is not a member of Node

At this point I am trying to access the style member of a Node, which according to the Javascript docs should be there, but Scala.js is giving me an error.

Answer 1

(Note that this is more a Javascript question than a Scala.js one per se.)

There are a few answers, depending whether you're willing to include the jQuery library. This is a somewhat heavy but extremely common library in the Javascript world, which is also often used in Scala.js programming. It isn't required, but it makes this sort of thing considerably easier.

There are two popular Scala.js "facades" (Scala descriptions) for this library; I wrote one of them, jquery-facade . If you pull that in (as described on that page), the problem becomes fairly trivial:

import org.querki.jquery._

// Fetch all of the nodes. jQuery uses CSS selectors, more or less,
// so this means "everything with class my-img".
val myImgs = $(".my-img")
// Hide all of them. myImgs is a JQuery object -- a wrapper around
// all of those nodes -- so a single call hides all of them:
myImgs.hide()
// Or show them:
myImgs.show()

That's untested (and I'm battling flu today, so please forgive me any errors), but I think it should work...