Sample Index
1. 網頁換皮膚 ( 底色 ) ( HTML +CSS )
2. 改text control裡面的文字
3. 兩種操作方式 ( . 和 [] )
4. function的運用
5. 提取事件 ( 行為 [JS] 、 樣式 [CSS] 、 結構 [HTML] 三者分離
6. JS的Array + loop + 判斷
- 在HTML內，任何東西都可以加id (包括link) , 並且透過id去操作屬性..etc。
- 任何tag的任何屬性，都是能修改的。
- HTML裡面怎麼寫，在JS裡面就怎麼寫。
Sample:
- 網頁換膚
- 改text control裡面的文字
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<link id="l1" rel ="stylesheet" type="text/css" href="css2.css"/>
<script>
function skin1()
{
var oL=document.getElementById('l1');
oL.href='css1.css';
}
function skin2()
{
var oL=document.getElementById('l1');
oL.href='css2.css';
}
function setText()
{
var oTxt = document.getElementById('text1');
oTxt.title='Hello';
oTxt.value='World';
}
</script>
</head>
<body>
<input id="text1" type="text" />
<input type="button" value ="改文字" onClick="setText()" />
<input type="button" value="skin1" onClick="skin1()"/>
<input type="button" value="skin2" onClick="skin2()"/>
</body>
</html>
CSS 的部分
CSS1.css
@charset "utf-8";
/* CSS Document */
body{background:black;}
input {width:200;height:100px;background:yellow;}
CSS2.css
@charset "utf-8";
/* CSS Document */
body{background:#CCC;}
input {width:100;height:50px;background:red;}
兩種操作屬性的方式
- 一種是用 .
- 一種試用 []
- [] 能做的事情，.不一定能做
- .能做的事情，[]一定能做
Sample1.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
function setText(name)
{
var oTxt=document.getElementById('txt1');
//第一種操作屬性的方法
/*
var oTxt=document.getElementById('txt1');
oTxt.value='Hello World';
*/
//第二種操作屬性的方法
//1.第一種寫法
//oTxt['value']='Hello HaHa';
//2.第二種寫法
oTxt[name]='Hello HaHa';
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input type="button" value="OK" onclick="setText('value')"/>
</body>
</html>
Sample2.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1{
width:200px;
height:200px;
background:red;
}
</style>
<script>
function setStyle(name,value)
{
var oDiv=document.getElementById('div1');
oDiv.style[name]=value;
}
</script>
</head>
<body>
<input type="button" value="變寬" onClick="setStyle('width' ,'400px') " />
<input type="button" value="變高" onClick="setStyle('height' ,'400px') " />
<input type="button" value="變綠" onClick="setStyle('background','green') " />
<div id="div1">
</div>
</body>
</html>
規則:
Style 與 className
Element.style.屬性=xxx 是修改行間樣式
之後再修改className不會有效果 (因為行間的優先級比較高)
- * < tag < class < ID < 行間
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
#div1 {
width:200px;
height:200px;
border:1px solid black;
}
.box{background:red}
</style>
</head>
<script>
function OnRed()
{
var m_Div=document.getElementById('div1');
m_Div.className='box';
}
function OnGreen()
{
var m_Div=document.getElementById('div1');
m_Div.style.background='green';
}
</script>
<body>
<div id="div1" ></div>
<input type="button" value="ren" onClick="OnRed()">
<input type="button" value="green" onClick="OnGreen()">
</body>
</html>
Function 名字()
{
….
}
oBtn.onclick=名字
onBtn.onclick=function()
{
….
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
</head>
<body>
<input id="btn1" type="button" value="按鈕"/>
<script>
var oBtn = document.getElementById('btn1');
/*
function abc()
{
alert('a');
}
*/
oBtn.onclick=function ()//匿名函數
{
alert('a');
}
</script>
</body>
</html>
提取事件
行為 、 樣式 、 結構分離
JS CSS HTML
規則:
- 別加行間樣式
- 別加行間的JS事件
Sample code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
window.onload = function() //window.onload : 頁面加載完成的時候才會執行裡面的code
{
var oBtn = document.getElementById('btn1');
oBtn.onclick=function()
{
alert('a');
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按鈕"/>
</body>
</html>
getElementsByTagName
取得的東西就是array
用法 : aDiv=document.getElementsByTagName('div');
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style>
div
{
width:200px;
height:200px;
float:left;
border:1px solid black;
margin:10px;
}
</style>
<script>
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
//alert(aDiv.length);
/*
-------for loop-------
for (var i =0 ;i<aDiv.length;i++)
{
if (i==2||i==0)
{
aDiv[i].style.background='red';
}
}
*/
/*
-------while loop-------
var i = 0 ;
while (i < aDiv.length)
{
aDiv[i].style.background='red';
i+=1;
if (i==2) break;
}
*/
for (var i = 0 ; i < aDiv.length;i++)
{
aDiv[i].style.background='red';
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Sample 全選、不選、反選
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<script>
window.onload= function()
{
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv =document.getElementById('div1');
var aCheck=oDiv.getElementsByTagName('input');
oBtn1.onclick=function()
{
for (var i = 0 ; i < aCheck.length;i++)
{
aCheck[i].checked = true;
}
}
oBtn2.onclick=function()
{
for (var i = 0 ; i< aCheck.length;i++)
{
aCheck[i].checked = false;
}
}
oBtn3.onclick=function()
{
for (var i = 0 ; i< aCheck.length;i++)
{
if (aCheck[i].checked == false)
{
aCheck[i].checked = true;
}
else
{
aCheck[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全選"/><br>
<input id="btn2" type="button" value="不選"/><br>
<input id="btn3" type="button" value="反選"/><br>
<div id="div1">
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
</div>
</body>
</html>
留言列表
Linux (2)
{{ article.title }}