- 步驟一：找到要改變樣式的物件：document.getElementById("id名稱")
- 步驟二：
- 透過物件.style.css屬性(例如color)=css值(例如red)來改變樣式
- 先在class中寫好style，再使用，例如：document.getElementById("h").className = "s";
//推薦灰階連結：http://blog.shihshih.com/css-filter/
移動過去時字體顏色改變，離開時也改變
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>01dynamicStyle.html</title>
<style>
.n{/*事先定義好的樣式*/
color:blue;
font-family:Arial;
font-size:24px;
}
.s{
color:red;
font-family:"Script MT Bold";
font-size:36px;
}
</style>
<script>
window.onload=function(){
document.getElementById("h").onmouseover=mouseOver;
document.getElementById("h").onmouseout=mouseOut;
}
function mouseOver() {
//方法一二不建議混用，會有bug
//method 1
//document.getElementById("h").style.color="red"
//method 2
document.getElementById("h").className = "s";
}
function mouseOut() {
//method 1
//document.getElementById("h").style.color = "green";
//method 2
document.getElementById("h").className = "n";
}
</script>
</head>
<body>
<h1 id="h" class="n" >this is heading 1</h1>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>02dynamicStyleImg.html</title>
<style>
.s {
-webkit-filter: grayscale(1); /*css語法，沒有任何色彩的黑白影像，把-webkit-拿掉也可以*/
}
.n {
-webkit-filter: grayscale(0); /*顏色不變*/
}
</style>
<script>
window.onload = function () {
document.getElementById("idstar").onmouseover = mouseOver;
document.getElementById("idstar").onmouseout = mouseOut;
}
function mouseOver() {
document.getElementById("idstar").className = "n";
}
function mouseOut() {
document.getElementById("idstar").className = "s";
}
</script>
</head>
<body>
<img id="idstar" class="s" src="Images/star.jpg" /><!--輸入一張圖片(原本為黃色星星)-->
</body>
</html>
留言列表
【前端網頁開發技術】 (4)
