querySelector玩玩

html5支援的API

by cactus77kiki

HTML

<div id="test1" class="redtext">
  This is DIV 1
</div>

<div id="test2" class="bluetext">
  This is DIV 2
</div>

CSS

.redtext{
  color: red;
}
.bluetext{
  color: blue;
}

JavaScript

/*https://kknews.cc/zh-tw/other/j52klrq.html*/
changeDiv1ToGreenText();
changeDiv2ToPink();
checkIfHasClass();

//-----js選取器範例-----
//改為綠色字
function changeDiv1ToGreenText(){
	document.querySelector("#test1").style.color = "green";
}

//改為粉紅字
function changeDiv2ToPink(){
	document.querySelector(".bluetext").style.color = "#FFC9C9";
}

//檢查是否有某個class
function checkIfHasClass(){
	var data = document.querySelector("#test1").classList.contains("redtext");
	console.log(data);	//true
}