JavaScript matches()

admin發表於2019-11-04
JavaScript

matches 方法可以可以檢測 CSS 選擇器是否匹配當前元素。

如果匹配，此方法返回 true，否則返回 false。

不要和字串物件的 match() 方法混淆。

關於 match() 方法參閱正規表示式 match()一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let result = element.matches(selectorString)

引數解析：

（1）.selectorString：CSS選擇器字串。

瀏覽器支援：

（1）.IE9+ 瀏覽器支援此方法。

（2）.edge 瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.opera 瀏覽器支援此方法。

（5）.火狐瀏覽器支援此方法。

（6）.safari 瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = () => {
  let odiv=document.getElementsByTagName("div")[0];
  let obt=document.getElementById("bt");
  obt.onclick = () => {
    if(odiv.matches(".a")){
      odiv.innerHTML="www.softwhy.com"
    }
  }
}
</script>
</head>
<body>
<div class="a b">螞蟻部落</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

點選按鈕可以檢測方法的引數作為一個CSS選擇器是否可以匹配對應元素。

如果匹配，那麼方法返回true，並將本站的網址寫入此div中。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/04/155301wa7iq5jqarqtr2h5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

說明選擇器".a"可以匹配div元素，所以方法返回值為true，進而執行對應程式碼。

相關文章