HTML DOM 快速導覽 - 元素物件 element 的屬性 style

element.style 回傳元素 (element) 的 style 屬性 (attribute) 物件 (object) 。



舉例如下
?
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
67
68
69
70
71
72
73
74
75
76
77
78
79
function run() {
    var d = document.getElementById("demo");
    d.style.color = randomColor();
    d.style.fontSize = "x-large";
}
 
function randomColor() {
    var c1 = (Math.random() * 1000) % 256;
    var c2 = (Math.random() * 1000) % 256;
    var c3 = (Math.random() * 1000) % 256;
    c1 = hex(Math.floor(c1));
    c2 = hex(Math.floor(c2));
    c3 = hex(Math.floor(c3));
    return "#" + c1 + c2 + c3;
}
 
function hex(n) {
    var result = "";
    var temp, count;
    while (n > 16) {
        count = 1;
        while (n > exp(16, count)) {
            count += 1;
        }
        count -= 1;
        temp = n / exp(16, count);
        temp = Math.floor(temp);
        result += hexLetter(temp);
        n -= exp(16, count) * temp;
    }
    if (n == 16) {
        result += "1";
        n -= 16;
    }
    result += hexLetter(n);
     
    return result;
}
 
function hexLetter(n) {
    if (n >= 16 || n < 0) {
        return "";
    }
    else {
        switch (n) {
            case 10:
                return "A";
            case 11:
                return "B";
            case 12:
                return "C";
            case 13:
                return "D";
            case 14:
                return "E";
            case 15:
                return "F";
            default:
                return "" + n;
        }
    }
}
 
function exp(x, y) {
    var result = 1;
    while (y > 0) {
        result *= x;
        y -= 1;
    }
     
    return result;
}
 
/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：element015.js
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例先取得 id 屬性為 demo 的元素
3
4
5
var d = document.getElementById("demo");
d.style.color = randomColor();
d.style.fontSize = "x-large";


然後將字型顏色設定為隨機顏色，字型大小設定為 x-large 。


我們以下面的 HTML 文件載入
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="element015.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="RUN" onclick="run();">
<div>
<div id="demo">Choice. The problem is choice.</div>
<div>There is no spoon.</div>
<div>Because I choose to. Choice.</div>
</div>
</body>
</html>
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：element015.html
     功能：示範 JavaScript 程式
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (broswer) 開啟，按下 RUN 的結果如下



中英文術語對照
元素element
屬性element
物件object
瀏覽器broswer


您可以繼續參考
元素物件 element


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/element.style
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)