HTML DOM 快速導覽 - 樣式設定的物件 style

絕大多數 CSS 的性質 (property) 都可由 style 物件 (object) 進行設定， style 物件通常具有與 CSS 性質名稱相同的屬性 (attribute) ，如下列表

style 物件的屬性
名稱CSS 性質描述
displaydisplay元素呈現方式
colorcolor字型顏色
fontFamilyfont-family字型種類
fontWeightfont-weight字型粗細
fontSizefont-size字型尺寸
fontStylefont-style字型格式
fontVariantfont-variant字型變體
fontStretchfont-stretch字型伸縮
fontSizeAdjustfont-size-adjust字型大小
fontfont字型
textIndenttext-indent文字縮排
textAligntext-align水平對齊
lineHeightline-height文字行高
verticalAlignvertical-align垂直對齊
wordSpacingword-spacing單字間距
letterSpacingletter-spacing字元間距
textTransformtext-transform大小寫轉換
textDecorationtext-decoration文字裝飾
textShadowtext-shadow文字陰影
whiteSpacewhite-space空白字元
directiondirection文字方向
widthwidth寬度
heightheight高度
marginmargin邊界
marginLeftmargin-left左邊界
marginRightmargin-right右邊界
marginTopmargin-top上邊界
marginBottommargin-bottom下邊界
paddingpadding邊距
paddingLeftpadding-left左邊距
paddingRightpadding-right右邊距
paddingToppadding-top上邊距
paddingBottompadding-bottom下邊距
borderStyleborder-style邊框格式
borderLeftStyleborder-left-style左邊框格式
borderRightStyleborder-right-rtyle右邊框格式
borderTopStyleborder-top-style上邊框格式
borderBottomStyleborder-bottom-style下邊框格式
borderWidthborder-width邊框粗細
borderLeftWidthborder-left-width左邊框粗細
borderRightWidthborder-right-width右邊框粗細
borderTopWidthborder-top-width上邊框粗細
borderBottomWidthborder-bottom-width下邊框粗細
borderColorborder-color邊框顏色
borderLeftColorborder-left-color左邊框顏色
borderRightColorborder-right-color右邊框顏色
borderTopColorborder-top-color上邊框顏色
borderBottomColorborder-bottom-color下邊框顏色
borderborder邊框
borderLeftborder-left左邊框
borderRightborder-right右邊框
borderTopborder-top上邊框
borderBottomborder-bottom下邊框
backgroundbackground背景
backgroundColorbackground-color背景顏色
backgroundImagebackground-image背景圖片
backgroundRepeatbackground-repeat重複背景圖片
backgroundPositionbackground-position背景位置
backgroundAttachmentbackground-attachment背景固定
cssFloatfloat浮動
clearclear清除
positionposition定位
toptop對頂端位移
rightright對右端位移
bottombottom對底部位移
leftleft對左端位移
minWidthmin-width最小寬度
maxWidthmax-width最大寬度
minHeightmin-height最小高度
maxHeightmax-height最大高度
overflowoverflow溢出
clipclip剪裁
visibilityvisibility可見性
zIndexz-index重疊順序
captionSidecaption-side表格標題
borderCollapseborder-collapse儲存格邊框
borderSpacingborder-spacing儲存格邊距
emptyCellsempty-cells空白儲存格
tableLayouttable-layout表格外觀
listStylelist-style項目符號
listStyleTypelist-style-type符號類型
listStyleImagelist-style-image符號圖片
listStylePositionlist-style-position清單符號位置
contentcontent自訂內容
counterResetcounter-reset重設編號
counterIncrementcounter-increment編號計數
quotesquotes引號
cursorcursor滑鼠游標
outlineoutline外框
outlineStyleoutline-style外框格式
outlineWidthoutline-width外框粗細
outlineColoroutline-color外框顏色



舉例如下
function run1(d) {
    d.style.background = "white";
    d.style.color = "black";
}

function run2(d) {
    d.style.background = "black";
    d.style.color = "white";
}

/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style001.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 */


此例中的 run1() 將文字設定成白色，背景設定為黑色
function run1(d) {
    d.style.background = "white";
    d.style.color = "black";
}


run2() 則相反，也就是文字設定成黑色，背景設定為白色。


我們以下面的 HTML 文件載入
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM DEMO</title>
<script src="style001.js" type="text/javascript"></script>
<style>
#demo {
    width: 108px;
}
</style>
</head>
<body>
<div id="demo" onmouseover="run2(this);" 
               onmouseout="run1(this);">
There is no spoon.</div>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style001.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟，滑鼠移動文字上就會動態變成黑底白字



中英文術語對照
性質property
物件object
屬性attribute
瀏覽器broswer


您可以繼續參考
CSS 2.1 快速導覽

樣式設定物件 style


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


參考資料
https://developer.mozilla.org/en/DOM/CSS
https://developer.mozilla.org/en/DOM/element.style
https://developer.mozilla.org/en/DOM/HTMLStyleElement
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)