目的: V80204 - 自定 style - css - 自定字型,顏色,背景顏色
labelStyle: "font-size: 20pt; color: blue; background: gray; ",
目的: V80204 - 自定 style - css - 自定字型,顏色,背景顏色
目的: jQuery 屬性設定及 CSS
我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式,如果你有這個經驗,就會知道在設定時會有許多複雜及麻煩的問題,比如說舊 IE 它 setAttribute 不吃 name 屬性;又像在指定 class 屬性時,名稱不能用 class 而要用 className 等問題。令人開心的,jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了!
取得選取到的元素之屬性值:
.attr(attributeName)
例如,取得第一個連結的 title 值:
$('a').attr('title');
替選取到的元素設定屬性值:
.attr(attributeName, value)
例如,替所有連結的 title 屬性設為 Enjoy jQuery:
$('a').attr('title', 'Enjoy jQuery');
你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值:
.attr(attributes)
例如,同時改變 alt 和 title 屬性:
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
移除元素屬性也很簡單:
.removeAttr(attributeName)
例如,移除所有連結的 title 屬性:
$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);
對於 class,jQuery 另外提供個別的函式來作 class 增刪的動作,這是為了可以方便疊加與移除特定的 class。
增加 class:
.addClass(className)
例如,幫所有的段落加入 selected 和 highlight 類別:
$('p').addClass('selected highlight');
移除 class:
.removeClass(className)
例如,移除 id 為 wrapper 的元素其 blue 這個類別:
$('#wrapper').removeClass('blue');
val,一個很常用到的方法,用來取得和設定表單元素的 value 值:
.val() // get
.val(value) // set
例如,取得表單元素的值:
// 取得下拉選單 (select box) 的值
$('select.foo').val();
// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();
// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();
例如,設定表單元素的值:
// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">
傳統 JavaScript 在處理 CSS 的問題上簡直頭大,設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor;對透明度 opacity 設定上你要了解舊 IE 是用 filter··。jQuery 的寫法很簡單,就直接用 key/value 成對的一組屬性來設定,我們只要知道 CSS 的表達式就沒問題。
取得第一個匹配到的元素之樣式:
.css(propertyName)
例如,取得第一個段落的字體顏色:
$('p').css('color');
替所有匹配到元素設定一種樣式:
.css(propertyName, value)
例如,替所有段落的透明度設為半透明:
$('p').css('opacity', '0.5');
// 是的,設 opacity 就可以,jQuery 已經幫你處理好跨瀏覽器問題
你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式:
.css(properties)
例如,替所有段落的字體設為紅色,背景設為藍色:
$('p').css({
color: 'red',
'background-color': 'blue'
});
-
,記得加上引號,沒有的話則可有可無。.width() // 取得元素寬度
.width(value) // 設定元素寬度
.height() // 取得元素高度
.height(value) // 設定元素高度
.width() .height() 抓到的值是元素內容寬、高度,不包含 padding, border, margin。
例如,取得第一個匹配到的段落元素高度 (px) (無參數)
$('p').height();
例如,設定每個匹配到的段落元素其高度設為 100px (沒指定單位時預設為 px) (有參數)
$('p').height(100);
取得元素相對於當前視窗左上角的位置偏移量:
.offset()
// 返回值 Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)
一般在傳統 JavaScript 我們會用 offsetLeft 及 offsetTop 來取得元素在頁面上的座標,不過 IE 與 FF 瀏覽器解讀這兩個屬性是不一樣的,IE 會解讀成目標元素跟父元素的 left-top 距離;FF 則是相對於頁面上的 left-top,所以在 IE 下我們一般都需要利用往父元素跑迴圈加總 offsetLeft 來取得元素在頁面上的座標值。不過,在 jQuery 中我們統一用 offset() 就可以囉!
看過上述 jQuery 對於屬性及樣式的操作,是不是簡化了我們許多不必要的煩惱,讓我們可以將精力拉回純 HTML 與 CSS 的思緒上面呢!
目的: Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)是用來描述HTML的樣式
selector(選取器),也就是要定義的對象。
將樣式套用在 selector(選取器)
我們想設定一些標籤的基本樣式
body {<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>
</body>
</html>
my.css的內容則不需要有<style></style>,如下面的範例:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
background-color: darkblue;
}
p {
font-size: 20px;
}
selector可以是
html的基本元素(element),如:body、h1等等。上面的範例就是針對基本元素定義樣式。
當我們希望只針對某一個特定元件定義樣式,我們可以利用在html中所定義的id定義樣式。
當我們希望只針對某一群元件定義樣式,我們可以利用在html中所定義的class定義樣式。
要針對id定義樣式的話,在selector前加「#」:
<!DOCTYPE html>
<html>
<head>
<style>
#primaryHeading {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id="primaryHeading">HTML</h1>
<h1>CSS</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="importantHeadings">HTML</h1>
<h1 class="importantHeadings">CSS</h1>
<h1>JavaScript</h1>
<h1>jQuery</h1>
</body>
</html>
3>利用 tag (p, body, h1) 套用樣式
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
background-color: darkblue;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>吳濟聰</h1>
<p>輔大資管系助理教授</p>
<p>印地安那大學博士</p>
</body>
</html>
4>div span
雖然div及span都算是html的基本語法,但是,通常是用在樣式的設定上。
div與span的差別在於div是可以用來定義一個區塊的樣式,而且在<div></div>前後會換行。
而span只能在一行之中,而且不會換行
<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
text-align: center;
color: red;
background-color:black;
padding:20px
}
</style>
</head>
<body>
<div class="importantHeadings">
<h1>My Important Heading</h1>
<h1>My Second Heading</h1>
</div>
<p>hello</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.importantHeadings {
text-align: center;
color: red;
background-color:black;
padding:20px
}
</style>
</head>
<body>
<h1><span class="importantHeadings">My Important Heading</span></h1>
<h1><span class="importantHeadings">My Second Heading</span></h1>
<p>hello</p>
</body>
</html>
2>Extjs 的 panel. bodyStyle 設定 兩種方式 CSS 字串
說到font-size,就必須要知道該屬性設定值的問題,font-size可設定的值Amos會將其區分成三大類:
關鍵字 : small , large, larger,
絕對單位:
px (1pixel = 1/96in) , 螢幕上顯示數據的最基本的點
pt (1point = 1/72in) ,是印刷行業常用單位
cm
mm
in (1inch = 96px = 2.54cm)
相對單位: % (百分比)