AP102 2016/4/27 JAVASRIPT getElementById
HTML
../images/washDrawing/046.JPG
這個連結方式是相對連結
要記得換成自己的圖片
onclick是一種事件
呼叫animationPlay( )這個函式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="32_main.css">
<script src="33_new.js"></script>
<title>Animation--Play Or Pause</title>
</head>
<body>
<img src="../images/washDrawing/046.JPG" width="250" id="image">
<hr>
<p>
<button onclick="animationPlay()">Play</button>
<button onclick="animationPause()">Pause</button>
</p>
</body>
</html>CSS
呼叫keyframes是 css3呼叫動畫的一種方式
slide是自定義的命名方式
@keyframes slide{
from{
margin-left: 0%;
}
to{
margin-left: 75%;
}
}
img{
animation-name:slide;
animation-duration:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
button{
font-size: x-large;
}
p{
text-align: center;
}Javascript
Document 物件
When an HTML document is loaded into a web browser, it becomes a document object.
當每個html文件被載入到瀏覽器以後
它就成為了一個document物件
The document object is the root node of the HTML document and the “owner” of all other nodes:
(element nodes, text nodes, attribute nodes, and comment nodes).
當document物件是所有html文件的根節點他擁有所有其他的節點
The document object provides properties and methods to access all node objects, from within JavaScript.
在JS裡面 當document物件提供屬性與方法去與其他物件串接
Tip: The document is a part of the Window object and can be accessed as window.document.
提示：Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行溝通。
中國用語寫訪問 英文原文是access 台灣的用語應該是串接
getElementById
Definition and Usage
The getElementById() method returns the element that has the ID attribute with the specified value.
getElementById() 方法回傳一個元素是附加有一個ID屬性
以下面的例題來說就是image
在html裡面有這個id特徵
This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document.
這是一個最常用的方法在HTML DOM內
在任何時間都是拿來操作或者得到格式資訊在html文件當中
什麼是 HTML DOM？
HTML DOM 是：
HTML 的標準物件模型
HTML 的標準程式碼接口
W3C 標準
HTML DOM 定義了所有 HTML 元素的物件和属性，以及串接他們的方法。
換句話說，HTML DOM 是關於如何獲取、修改、添加或删除 HTML 元素的標準。
Returns null if no elements with the specified ID exists.
要是沒有這個元素存在
則回傳空值
An ID should be unique within a page. However, if more than one element with the specified ID exists, the getElementById() method returns the first element in the source code.
當有多個同樣的ID選擇器存在
他會選擇第一個元素
function animationPlay(){
document.getElementById('image').style.animationPlayState='running';
}
function animationPause(){
document.getElementById('image').style.animationPlayState='paused';
}
Comments
Post a Comment