JavaScript HTML DOM - CSS ??
JavaScript?? CSS? ???? ???? 4??? ????.
?? ??? ??(??? ???)
?? ??? ?? ID ??
? CSS ??
????? ??? ?? ??.
?? ? ?? ??? ???? ?? ?? ????. ?? ? ?? ??? ?? ?? ?? ??? ??? ? ??? ??? ? ???? ???? ????.
?? ??? ??(??? ???)
? ???? ???? ?? ????. ?? ??? ??? ??? ?? ???? ?? ???? ?? ??? ???? ??????. ???? ?? ?????.
var element = document.getElementById("test");
element.style.display = "none" //Hide the element
??? ?? CSS ???? ?????. name?font-size, background-image ? ?? ??? ???? ?? ??(-)? ???? ????. ??? JavaScript??? ??? "????"? ????? ??? ?? ??? ? ????. ?? ??. FontSize, backgroundImage? ?? ?? ??? ????? "camelCase"? ???? ???.
?? ?? ????? ??? ???? ??? ??? ?? ????. ?? ??, FontSize? ???? px, em, %(???) ?? ????.
Change class, id
id ? class? ??? ??? ?? "??"???. ?? ? ????? ??? ???? ???? ???????.
ID? ???? ??? ???? ?????, ??? ??? ???? ? ???? ??? ????? ? ??? ???? ?? ?? ?? ????. JavaScript? ??? ?? ????? ???? ??? ??? ? ????.
JavaScript?? ???? ??? ?????? ?? ???? ?????? className? ???? ?????. ?:
.redColor{
color: red;
}
. yellowBack {
background: yellow;
}
element.className = "redColor";//??? ??
element.className += "yellowBack";//??? ??
HTML ??? ???? ????? ????? ?? ??? ??????.
document.getElementById(id).style.property=new style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<h1 id="id1">標(biāo)題</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">點(diǎn)擊改變</button>
</body>
</html>
