3
類型的元素我在DOM圖像元素的HTML ID,我想獲得的元素作爲HTMLImageElement
。獲得通過ID在Scala.js
我知道關於document.querySelector(s"#$imageId")
,但是這僅僅返回HTMLElement
這是不是很有用,因爲我需要訪問,例如,圖像的src
屬性。
如何我從DOM的類型元素?要做到這一點
類型的元素我在DOM圖像元素的HTML ID,我想獲得的元素作爲HTMLImageElement
。獲得通過ID在Scala.js
我知道關於document.querySelector(s"#$imageId")
,但是這僅僅返回HTMLElement
這是不是很有用,因爲我需要訪問,例如,圖像的src
屬性。
如何我從DOM的類型元素?要做到這一點
的一種方式,是document.querySelector
鑄就HTMLElement
返回,返回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)
你不需要自己做反射魔法。模式匹配可以使用'ClassTag [T]',你所期望的方式('情況ELEM:T =>')。另外,作爲關於樣式的註釋,大多數人在構造Option時使用'Some'和'None'。 'Option.apply'通常用於Java interop(如果參數爲null,則返回'None')。 – gzm0
非常感謝gzm0!我相應地編輯了我的答案。 –
我發現它有用延長'org.scalajs.dom.document'能夠調用此像'document.getElement [HTMLSelectElement](「一些-ID」)'使用隱式類。 – ngu