轉載地址:http://blog.csdn.net/forezp/article/details/52792228
1.通過ID獲取元素
document.getElementById(“id”)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("結果:"+mychar); //輸出獲取的P標籤。
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2.
innerHTML 屬性用於獲取或替換 HTML 元素的內容。
語法:Object.innerHTML
1.Object是獲取的元素對象,如通過document.getElementById(“ID”)獲取的元素。
2.注意書寫,innerHTML區分大小寫。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基於對象、事件驅動的簡單腳本語言,嵌入在HTML文檔中,由瀏覽器負責解釋和執行,在網頁上產生動態的顯示效果並實現與用戶交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con") ;
document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標籤內容
mychar.innerHTML="ddd";
document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標籤內容
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
3.改變 HTML 樣式
HTML DOM 允許
JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢?
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象,如通過document.getElementById(“id”)獲取的元素。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style樣式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
mychar.style.color="red";
mychar.style.backgroundColor="#CCC";
mychar.style.width="300";
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4.顯示和隱藏(display屬性)
語法:
Object.style.display = value
value值:
none:隱藏
block:顯示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做爲一個Web開發師來說,如果你想提供漂亮的網頁、令用戶滿意的上網體驗,JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隱藏內容" />
<input type="button" onclick="showtext()" value="顯示內容" />
</form>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
5.控制類名(className 屬性)
語法:
object.className = classname
作用:
1.獲取元素的class 屬性
2. 爲網頁內的某個元素指定一個css樣式來更改該元素的外觀
例子:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className屬性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
6.任務
一、定義”改變顏色”的函數
提示:
obj.style.color
obj.style.backgroundColor
二、定義”改變寬高”的函數
提示:
obj.style.width
obj.style.height
三、定義”隱藏內容”的函數
提示:
obj.style.display=”none”;
四、定義”顯示內容”的函數
提示:
obj.style.display=”block”;
五、定義”取消設置”的函數
提示:
使用confirm()確定框,來確認是否取消設置。
如是將以上所有的設置恢復原始值,否則不做操作。
六、當點擊相應按鈕,執行相應操作,爲按鈕添加相應事件
答案:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript課程</H2>
<div id="txt">
<h5>JavaScript爲網頁添加動態效果並實現與用戶交互的功能。</h5>
<p>1. JavaScript入門篇,讓不懂JS的你,快速瞭解JS。</p>
<p>2. JavaScript進階篇,讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
<p>3. 學完以上兩門基礎課後,在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
</div>
<form>
<!--當點擊相應按鈕,執行相應操作,爲按鈕添加相應事件-->
<input type="button" value="改變顏色" onclick="clo()">
<input type="button" value="改變寬高" onclick="wid()">
<input type="button" value="隱藏內容" onclick="hid()">
<input type="button" value="顯示內容" onclick="blo()">
<input type="button" value="取消設置" onclick="res()">
</form>
<script type="text/javascript">
//定義"改變顏色"的函數
function clo(){
var p = document.getElementById("txt");
p.style.color="red";
}
//定義"改變寬高"的函數
function wid(){
var p = document.getElementById("txt");
p.style.width="300px";
p.style.height="300px";
}
//定義"隱藏內容"的函數
function hid(){
var p = document.getElementById("txt");
p.style.display = "none";
}
//定義"顯示內容"的函數
function blo(){
var p = document.getElementById("txt");
p.style.display = "block";
}
//定義"取消設置"的函數
function res(){
var p1 = confirm("是否取消");
var p = document.getElementById("txt");
if(p1==true){
p.removeAttribute('style');
}
}
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 頂
- 1
- 踩
- 0
我的同類文章
- •javascript入門筆記9-認識DOM2016-10-31
- •javascript入門筆記7-計時器2016-10-31
- •javascript入門筆記5-事件2016-10-13
- •javascript入門筆記2-window2016-10-11
- •javascript入門筆記8-window對象2016-10-31
- •javascript入門筆記6-內置對象2016-10-13
- •javascript入門筆記4-數組2016-10-12
- •Javascript入門筆記1-script標籤2016-10-10