Home » jQuery 技巧

[jQ]如何取得 Html 元素的邊框值？

[ 日期： | 瀏覽：11,238 | 迴響：搶沙發 ]

學過 jQuery 的人都會被內建的 css() 方法所吸引，它除了可以取出指定的 CSS 屬性值之外，同時也能針對單一或是多個 CSS 屬性來做設定的動作。

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8

// 取單一屬性值
$(element).css(name);
 
// 設定單一屬性值
$(element).css(name, value);
 
// 設定多屬性值
$(element).css(properties);

讓我們先看一下基本的用法：假設我們有一個設定好 class 的 Div 元素

檢視原始碼 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

<style type="text/css">
	.info {
		border: 1px solid black;
		margin-bottom: 20px;
		padding: 5px 5px 5px 10px;
		color: #555;
		font-size: 12px;
		background-color: #0ff;
	}
	.log {
		border: 1px solid black;
		background: #ff9;
		width: 300px;
		padding-left: 10px;
	}
</style>
</head>
 
<body>
	<div class="info">
		繼 2009 年 8 月底分享了「jQuery 外掛 36 計」後，現在又新增了 36 個外掛，並且把前一本的加在一起變成「jQuery 外掛 72 變」。
		書中收集了 72 個 jQuery 的外掛供開發人員可以參考使用，並也列出了每一個外掛的屬性、參數及使用的方法，同時還有使用的範例程式。
	</div>
 
	<div class="log"></div>
</body>

接下來就能利用 jQuery 的 css() 方法來取得 css 屬性值：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9

$(function() {
	var _info = $(".info");
	// 取得 .info 的 color, font-size 及 background-color 屬性值
	$(".log").html(
		"color: " + _info.css('color') + "<br />" +
		"font-size: " + _info.css('font-size') + "<br />" +
		"background-color: " + _info.css('background-color') + "<br />"
	);
});

get-element-border_1

這樣是不是很簡單又方便呢！？那如果我要取得邊框值的話要怎麼寫呢？

檢視原始碼 JavaScript
1

$(".info").css("border");//錯誤的用法

如果是這樣寫的話就會錯很大囉~

border 屬性其實只是一種比較簡單的表示方法，它其實代表了 border-width、border-style 及 border-color 等三種屬性，所以若沒指名的話就不知道你是要取得 border 中的那個屬性值。且邊框又會區分 top(上)、left(左)、bottom(下) 及 right(右) 等四個不同的方向，所以在取值時就要指定取那個方向的那個屬性才行：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function() {
	var _info = $(".info");
	// 取得 .info 的 border-top-width, border-bottom-color、 border-left-style 及 padding-left 屬性值
	$(".log").html(
		"border-top-width: " + _info.css('border-top-width') + "<br />" +
		"border-bottom-color: " + _info.css('border-bottom-color') + "<br />" +
		"border-left-style: " + _info.css('border-left-style') + "<br />" + 
		"padding-left: " + _info.css('padding-left') + "<br />" + 
		"=====以下為 IE 支援====" + "<br />" +
		"border-width: " + _info.css('border-width') + "<br />" +
		"border-color: " + _info.css('border-color') + "<br />" +
		"border-style: " + _info.css('border-style') + "<br />"
	);
});

get-element-border_2

雖然從結果看來 IE 支援更簡單的方式，不過這是在四個邊框值都一樣時才有用，若某一邊的值不一樣時則會出現錯誤的唷！結論就是，若要取得的 css 屬性本身會有方向的區別時，則要再加上方向才行。例如：border-top-width、padding-top 等...。

範例 1 範例 2

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響