Question

我在DOM中有一个图片元素的HTML ID，我希望将该元素作为HTMLImageElement。

我知道document.querySelector(s"#$imageId")，但这仅返回HTMLElement，因为我需要访问图片的src属性，因此不太有用。

如何从DOM中获取类型的元素？

Answer 1

执行此操作的一种方法是投放HTMLElement返回的document.querySelector并返回Option[Image]：

import org.scalajs.dom.document
import org.scalajs.dom.html.Image

def getImage(imageId: String): Option[Image] = {
  val queryResult = document.querySelector(s"#$imageId")
  queryResult match {
    case image: Image => Some(image)
    case other =>
      println(s"Element with ID $imageId is not an image, it's $other")
      None
  }
}

用法：

val result = getImage("my-image").fold {
  "Couldn't find image"
} { image => s"My image URL: ${image.src}" }

println(result)

适用于各种元素（img，div，input等）的更通用的解决方案是：

import scala.reflect.ClassTag
import org.scalajs.dom.document

def getElement[T: ClassTag](elementId: String): Option[T] = {
  val queryResult = document.querySelector(s"#$elementId")
  queryResult match {
    case elem: T => Some(elem)
    case other =>
      println(s"Element with ID $elementId is $other")
      None
  }
}

用法：

import org.scalajs.dom.html.Div

val divResult = getElement[Div]("my-div").fold {
  "Couldn't find div"
} { div => s"Div display style: ${div.style.display}" }

println(divResult)

在Scala.js中按ID获取键入的元素

1 个答案: