您的位置:首页 > Web前端 > HTML

HTML DOM Style 对象

2008-04-11 14:07 435 查看
body {
margin: 0;
padding: 0;
border: 0;
text-align: center;
background: #f9f9f9 url(/i/site_holder.gif) top center repeat-y;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}

div#wrapper {
margin: 0 auto;
padding: 0;
border: 0;
width: 966px;
text-align: left;
background: transparent url(/i/site_wrapper.gif) top left repeat-y;
}

div#header {
margin: 0 0 0 12px;
padding: 0;
border: 0;
width: 937px;
height: 60px;
background: #c3c3c3;
}

div#navsecond {
float: left;
margin: 0 0 0 6px;
padding: 0;
border: 0;
width: 150px;
background : transparent;
}

html>body div#navsecond {
margin-left: 12px;
}

div#maincontent {
text-align: left;
margin: 0;
padding: 0;
border: 0;
width: 637px;
background: transparent;
}

div#sidebar {
float: left;
margin: 0;
padding: 0;
border: 0;
width: 150px;
background: transparent;
}

div#footer {
clear: both;
margin: 0;
padding: 0;
margin-left: 12px;
width: 937px;
height: 46px;
background: #b6b6b6;
border-top: 10px solid #fff;
border-bottom: 10px solid #fff;
}

div#footer p {
margin: 2px 10px 0 10px;
font-size: 12px;
}

div#header a {
text-indent: -9999px;
margin: 0;
padding: 0;
border: 0;
overflow:hidden;
}

div#header a:link, div#header a:visited {
display: block;
width: 937px;
height: 60px;
background : transparent url(/i/site_header01.gif) top left no-repeat;
margin: 0;
padding: 0;
border: 0;
}

div#header a:hover {
background: #cacaca url(/i/site_header02.gif) top left no-repeat;
}

div#navfirst {
height: 40px;
width: 937px;
margin: 0 0 0 12px;
padding: 0;
border: 0;
background: #fff;
}

div#navfirst ul#menu {
height: 40px;
width: 937px;
background: transparent url(/i/site_nav.gif) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}

div#navfirst ul#menu li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}

ul#menu li,ul#menu a {
display: block;
height: 40px;
}

div#navfirst ul#menu li a {
text-indent: -9999px;
overflow:hidden;
text-decoration: none;
}

#h {left:0;width:88px;}
#x {left:88px;width:86px;}
#b {left:174px;width:189px;}
#s {left:363px;width:177px;}
#d {left:540px;width:120px;}
#m {left:660px;width:134px;}
#w {left:794px;width:143px;}

#h a:hover {background: transparent url(/i/site_nav.gif) 0 -40px no-repeat;}
#x a:hover {background: transparent url(/i/site_nav.gif) -88px -40px no-repeat;}
#b a:hover {background: transparent url(/i/site_nav.gif) -174px -40px no-repeat;}
#s a:hover {background: transparent url(/i/site_nav.gif) -363px -40px no-repeat;}
#d a:hover {background: transparent url(/i/site_nav.gif) -540px -40px no-repeat;}
#m a:hover {background: transparent url(/i/site_nav.gif) -660px -40px no-repeat;}
#w a:hover {background: transparent url(/i/site_nav.gif) -794px -40px no-repeat;}

body.html #h {background: transparent url(/i/site_nav.gif) 0 -40px no-repeat;}
body.xml #x {background: transparent url(/i/site_nav.gif) -88px -40px no-repeat;}
body.browserscripting #b {background: transparent url(/i/site_nav.gif) -174px -40px no-repeat;}
body.serverscripting #s {background: transparent url(/i/site_nav.gif) -363px -40px no-repeat;}
body.dotnet #d {background: transparent url(/i/site_nav.gif) -540px -40px no-repeat;}
body.multimedia #m {background: transparent url(/i/site_nav.gif) -660px -40px no-repeat;}
body.webbuilding #w {background: transparent url(/i/site_nav.gif) -794px -40px no-repeat;}

/* Default links */
a:link, a:visited {
text-decoration : underline;
color : #900b09;
background : transparent;
}

a:hover {
text-decoration : underline;
color: #ff0000;
background : transparent;
}

a:active {
text-decoration : underline;
color : #ff0000;
background : transparent;
}

div#navsecond a:link, div#navsecond a:visited {
text-decoration : none;
color:#000;
background : transparent;
}

div#navsecond a:hover {
text-decoration : underline;
color : #000;
background : transparent;
}

div#navsecond a:active {
text-decoration : underline;
color : #000;
background : transparent;
}

h2, h3, h4, h5, h6 {
font-weight: bold;
margin:0;
padding:0;
}

div#maincontent h1 {
margin:15px 0 0 15px;
font-size: 20px;
font-family: '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
}

div#maincontent h2 {
font-size: 14px;
}

div#maincontent h3, div#maincontent h4{
margin:20px 0 0 0;
font-size:12px;
}

body#homesecond div#navsecond li {
margin:5px 0 0 0;
font-weight:bold;
font-size:12px;
}

div#w3 h2 {
margin:0;
}

div.idea h3 {
margin-top:15px;
}

div#navsecond h2, div#sidebar h2 {
font-size: 12px;
margin:10px 0 0 12px;
}

p {
margin: 12px 0 0 0;
line-height: 150%;
}

div#w3school p {
margin-left:15px;
}

div#intro strong {
font-size:12px;
}

div#maincontent div#intro img {
float:left;
margin:0 30px 0 0;
padding:0;
}

p.note span {
font-weight:bold;
}

p.important span {
font-weight:bold;
color:#dd0000;
}

p.tip span {
font-weight:bold;
color:#ff9955;
}

p.inherited {
font-weight:bold;
color:#ff0000;
}

p.inherited span {
font-weight:bold;
color:#999;
}

em {
font-style:normal;
font-weight:bold;
}

pre {
width:580px;
margin: 10px 0 0 0;
padding: 10px;
border: 0;
border: 1px dotted #785;
background: #f5f5f5;
font-family: "Courier New",monospace;
font-size: 12px;
}

pre code {
font-family: "Courier New",monospace;
color:#0000ff;
}

pre span {
color:#999;
}

.tabledata table pre {
width:auto;
margin:0;
padding:0;
border:0;
background-color:transparent;
}

div#maincontent ul {
margin-top:10px;
margin-bottom:0;
}

div#maincontent li {
margin-top:3px;
}

div#navsecond ul, div#navsecond li, div#sidebar ul, div#sidebar li {
margin: 0;
padding: 0;
}

div#navsecond ul, div#sidebar ul {
margin-left: 12px;
}

div#navsecond li, div#sidebar li {
list-style: none;
}

div#navsecond li.list_apart {
margin-top:10px;
}

ul.small {
font-size:11px;
}

img {
border:0;
}
div#maincontent img {
margin:10px 0 0 0;
}

img.illustration {
margin:15px 0 0 5px;
}

body#homefirst img{
float:left;
}

div#maincontent div{
width: 607px;
margin: 0 0 0 15px;
padding: 20px 0 20px 0;
border:0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}

div#w3 {
text-align:center;
}

body#homefirst div#maincontent div.idea {
padding: 0;
min-height: 118px;
}

body#homesecond dl {
margin:0;
padding:0;
}

body#homesecond dt {
font-weight: bold;
font-size: 14px;
margin:0;
padding:0;
}

body#homesecond dd {
color:#000088;
margin:10px 0 0 0;
padding:0;
}

body#homesecond dd p {
margin:0;
padding:0;
}

div#definition dl {
margin: 0;
padding:0;
}

div#definition dt {
font-weight: bold;
font-size: 14px;
}

div#definition dd {
margin:0;
color:#000088;
}

div#maincontent div#toc div {
margin:0;
margin-top:15px;
margin-bottom:35px;
padding:0;
border:0;
}

div#toc img {
float:left;
margin-right:10px;
}

div#toc div dt, div#toc div dl {
margin-top:0;
}

div#example dl, div.example dl, div#moreexamples dl, div#toc dl, div#referencelist dl {
margin: 10px 0 0 0;
}

div#example dt, div.example dt, div#moreexamples dt, div#toc dt, div#referencelist dt {
margin:15px 0 5px 0;
}

div#example dd, div.example dd, div#moreexamples dd, div#toc dd, div#referencelist dd {
margin:0;
}

div#definitionlist dl, dl.define {
margin: 10px 0 0 0;
}

div#definitionlist dt, dl.define dt {
margin:15px 0 3px 0;
font-weight:bold;
}

div#definitionlist dd, dl.define dd {
margin:0;
color:#000088;
}

div#maincontent input, div#maincontent select, {
font-family:"Courier New", Courier, monospace;
font-size:12px;
}

div.tabledata table {
margin-top:10px;
border-collapse:collapse;
border:1px solid #888;
}

div.tabledata th {
padding:5px 0 5px 0;
background-color:#ccc;
border:1px solid #888;
}

div.tabledata td {
vertical-align:text-top;
padding-top:4px;
background-color:#efefef;
border:1px solid #aaa;
}

div.tabledata ul, div.tabledata li {
list-style-type:none;
margin:0;
padding:0;
}

div.tabledata td em{
color:#ff0000;
font-weight:normal;
}

table.dataintable {
font-family:"Courier New", Courier, monospace;
font-size:12px;
margin-top:10px;
border-collapse:collapse;
border:1px solid #888;
width:100%;
}

table.dataintable pre {
width:auto;
margin:0;
padding:0;
border:0;
background-color:transparent;
}

table.dataintable th {
padding:5px 15px 5px 5px;
background-color:#ccc;
border:1px solid #888;
}

table.dataintable td {
vertical-align:text-top;
padding:5px 15px 5px 5px;
background-color:#efefef;
border:1px solid #aaa;
}

table.dataintable p {margin:0 0 2px 0;}

div#maincontent table.dataintable ul, div#maincontent table.dataintable li {
list-style-type:none;
margin:0;
padding:0;
}

table.dataintable td em{
color:#0000ff;
font-weight:normal;
}

table.dataintable .table_value {color:#0F93D2;}

.no_wrap {white-space:nowrap;}

div#maincontent table.dataintable ul.listintable {
margin:20px;
padding:0;
}

div#maincontent table.dataintable ul.listintable li{
list-style-type:disc;
}

#xhtmlreference table {
width:95%;
margin:15px 0 0 15px;
border-collapse:collapse;
border:1px solid #888;

}

#xhtmlreference table th {
padding:5px 15px 5px 5px;
background-color:#ccc;
border:1px solid #888;
}

#xhtmlreference table th.xhtml_tag {width:30%;}
#xhtmlreference table th.xhtml_description {width:50%;}
#xhtmlreference table th.xhtml_nn {width:5%;}
#xhtmlreference table th.xhtml_ie {width:5%;}
#xhtmlreference table th.xhtml_dtd {width:10%;}

#xhtmlreference table th.xhtml_sa {width:20%;}
#xhtmlreference table th.xhtml_sv {width:35%;}
#xhtmlreference table th.xhtml_sd {width:45%;}

#xhtmlreference table th.xhtml_ea {width:25%;}
#xhtmlreference table th.xhtml_ev {width:15%;}
#xhtmlreference table th.xhtml_ed {width:60%;}

#xhtmlreference table th.xhtml_message {width:40%;}
#xhtmlreference table th.xhtml_md {width:60%;}

#xhtmlreference table td {
vertical-align:text-top;
padding:5px 5px 5px 5px;
background-color:#efefef;
border:1px solid #aaa;
}

#xhtmlreference table p {
margin:0 0 2px 0;
}

#xhtmlreference table ul, #xhtmlreference table li {
list-style-type:none;
margin:0;
padding:0;
}

#xhtmlreference table a:link,#xhtmlreference table a:visited {color:#000099;}
#xhtmlreference table a:hover {color:#0066ff;}
#xhtmlreference table a:active {color:#0099ff;}

div#tpn, div#bpn {
height:21px;
width:230px;
margin: 0;
padding: 0;
border: 0;
background: #fff;
}

div#tpn ul.prenext, div#bpn ul.prenext {
height:21px;
width:230px;
background: transparent url(/i/site_prenext.gif) top left no-repeat;
margin:0;
padding:0;
border:0;
position:relative;
}

div#tpn ul.prenext li, div#bpn ul.prenext li {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0px;
overflow:hidden;
}

ul.prenext li, ul.prenext a {
display:block;
height:21px;
}

div#tpn ul.prenext a, div#bpn ul.prenext a {
text-indent: -9999px;
text-decoration: none;
}

.pre {left:0; width:105px;}
.next {left:125px; width:105px;}

.pre a:hover {background: transparent url(/i/site_prenext.gif) 0 -21px no-repeat;}
.next a:hover {background: transparent url(/i/site_prenext.gif) -125px -21px no-repeat;}

div#course {
background:transparent url(/i/site_course.gif) top left no-repeat;
padding:30px 0 10px 0;
}

div#selected {
background:transparent url(/i/site_selected.gif) top left no-repeat;
padding:30px 0 10px 0;
}

div#tools {
background:transparent url(/i/site_tools.gif) top left no-repeat;
padding:45px 0 5px 15px;
margin:0;
}

div#books {
background:transparent url(/i/site_books.gif) top left no-repeat;
padding:40px 0 10px 0;
}

div#tools h5 {
margin: 0 0 10px 0;
padding: 0;
overflow:hidden;
}

div#tools h5#tools_reference {
text-indent: -9999px;
width: 120px;
height: 45px;
}

div#tools h5#tools_reference a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-decoration: none;
background: transparent url(/i/site_reference.gif) top left no-repeat;
}

div#tools h5#tools_reference a:hover {
background: transparent url(/i/site_reference.gif) 0 -45px no-repeat;
}

div#tools h5#tools_example {
text-indent: -9999px;
width: 120px;
height: 45px;
}

div#tools h5#tools_example a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-decoration: none;
background: transparent url(/i/site_example.gif) top left no-repeat;
}

div#tools h5#tools_example a:hover {
background: transparent url(/i/site_example.gif) 0 -45px no-repeat;
}

div#tools h5#tools_quiz {
text-indent: -9999px;
width: 120px;
height: 45px;
}

div#tools h5#tools_quiz a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-decoration: none;
background: transparent url(/i/site_quiz.gif) top left no-repeat;
}

div#tools h5#tools_quiz a:hover {
background: transparent url(/i/site_quiz.gif) 0 -45px no-repeat;
}

div#searchui {
margin:15px 0 15px 0;
padding:0;
}

div#searchui p {
margin:0;
padding:0;
}

#searchui label {
margin:0 0 0 2px;
text-transform:uppercase;
letter-spacing:2px;
font-size:11px;
}

#searchui input.button {
background:#AE4141;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
}

#searchui input.box {
margin:0 0 0 2px;
width:100px;
background:#f5f5f5;
font:12px Verdana, Arial, Helvetica, sans-serif;
}

HTML DOM Style 对象

Style 对象

Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style 对象。

使用Style 对象属性的语法:

document.getElementById("id").style.property="值"

Style 对象的属性:

Background

Border and Margin

Layout

List

Misc

Positioning

Printing

Scrollbar

Table

Text

Standard

IE: Internet Explorer, M: 仅适用于Mac IE, W: 仅适用于Windows IE, F: Firefox, O: Opera

W3C: 万维网联盟 World Wide Web Consortium (Internet 标准).

Background 属性

属性描述IEFOW3C
background在一行中设置所有的背景属性419Yes
backgroundAttachment设置背景图像是否固定或随页面滚动419Yes
backgroundColor设置元素的背景颜色419Yes
backgroundImage设置元素的背景图像419Yes
backgroundPosition设置背景图像的起始位置4NoNoYes
backgroundPositionX设置backgroundPosition属性的X坐标4NoNoNo
backgroundPositionY设置backgroundPosition属性的Y坐标4NoNoNo
backgroundRepeat设置是否及如何重复背景图像419Yes

Border and Margin 属性

属性描述IEFOW3C
border在一行设置四个边框的所有属性419Yes
borderBottom在一行设置底边框的所有属性419Yes
borderBottomColor设置底边框的颜色419Yes
borderBottomStyle设置底边框的样式419Yes
borderBottomWidth设置底边框的宽度419Yes
borderColor设置所有四个边框的颜色 (可设置四种颜色)419Yes
borderLeft在一行设置左边框的所有属性419Yes
borderLeftColor设置左边框的颜色419Yes
borderLeftStyle设置左边框的样式419Yes
borderLeftWidth设置左边框的宽度419Yes
borderRight在一行设置右边框的所有属性419Yes
borderRightColor设置右边框的颜色419Yes
borderRightStyle设置右边框的样式419Yes
borderRightWidth设置右边框的宽度419Yes
borderStyle设置所有四个边框的样式 (可设置四种样式)419Yes
borderTop在一行设置顶边框的所有属性419Yes
borderTopColor设置顶边框的颜色419Yes
borderTopStyle设置顶边框的样式419Yes
borderTopWidth设置顶边框的宽度419Yes
borderWidth设置所有四条边框的宽度 (可设置四种宽度)419Yes
margin设置元素的边距 (可设置四个值)419Yes
marginBottom设置元素的底边距419Yes
marginLeft设置元素的左边距419Yes
marginRight设置元素的右边据419Yes
marginTop设置元素的顶边距419Yes
outline在一行设置所有的outline属性5M19Yes
outlineColor设置围绕元素的轮廓颜色5M19Yes
outlineStyle设置围绕元素的轮廓样式5M19Yes
outlineWidth设置围绕元素的轮廓宽度5M19Yes
padding设置元素的填充 (可设置四个值)419Yes
paddingBottom设置元素的下填充419Yes
paddingLeft设置元素的左填充419Yes
paddingRight设置元素的右填充419Yes
paddingTop设置元素的顶填充419Yes

Layout 属性

属性描述IEFOW3C
clear设置在元素的哪边不允许其他的浮动元素419Yes
clip设置元素的形状419Yes
content设置元信息5M1Yes
counterIncrement设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。5M1Yes
counterReset设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。5M1Yes
cssFloat设置图像或文本将出现(浮动)在另一元素中的何处。5M19Yes
cursor设置显示的指针类型419Yes
direction设置元素的文本方向519Yes
display设置元素如何被显示419Yes
height设置元素的高度419Yes
markerOffset设置marker box的principal box距离其最近的边框边缘的距离5M1Yes
marks设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外5M1Yes
maxHeight设置元素的最大高度5M19Yes
maxWidth设置元素的最大宽度5M19Yes
minHeight设置元素的最小高度5M19Yes
minWidth设置元素的最小宽度5M19Yes
overflow规定如何处理不适合元素盒的内容419Yes
verticalAlign设置对元素中的内容进行垂直排列41NoYes
visibility设置元素是否可见419Yes
width设置元素的宽度419Yes

List 属性

属性描述IEFOW3C
listStyle在一行设置列表的所有属性419Yes
listStyleImage把图像设置为列表项标记41NoYes
listStylePosition改变列表项标记的位置419Yes
listStyleType设置列表项标记的类型419Yes

Misc 属性

属性描述IEFOW3C
cssText41

Positioning 属性

属性描述IEFOW3C
bottom设置元素的底边缘距离父元素底边缘的之上或之下的距离519Yes
left置元素的左边缘距离父元素左边缘的左边或右边的距离419Yes
position把元素放置在static, relative, absolute 或 fixed 的位置419Yes
right置元素的右边缘距离父元素右边缘的左边或右边的距离519Yes
top设置元素的顶边缘距离父元素顶边缘的之上或之下的距离419Yes
zIndex设置元素的堆叠次序419Yes

Printing 属性

属性描述IEFOW3C
orphans设置段落留到页面底部的最小行数5M19Yes
page设置显示某元素时使用的页面类型5M19Yes
pageBreakAfter设置某元素之后的分页行为419Yes
pageBreakBefore设置某元素之前的分页行为419Yes
pageBreakInside设置某元素内部的分页行为5M19Yes
size设置页面的方向和尺寸19Yes
widows设置段落必须留到页面顶部的最小行数5M19Yes

Scrollbar 属性 (IE-only)

属性描述IEFOW3C
scrollbar3dLightColor设置箭头和滚动条左侧和顶边的颜色5WNoNoNo
scrollbarArrowColor设置滚动条上的箭头颜色5WNoNoNo
scrollbarBaseColor设置滚动条的底色5WNoNoNo
scrollbarDarkShadowColor设置箭头和滚动条右侧和底边的颜色5WNoNoNo
scrollbarFaceColor设置滚动条的表色5WNoNoNo
scrollbarHighlightColor设置箭头和滚动条左侧和顶边的颜色,以及滚动条的背景5WNoNoNo
scrollbarShadowColor设置箭头和滚动条右侧和底边的颜色5WNoNoNo
scrollbarTrackColor设置滚动条的背景色5WNoNoNo

Table 属性

属性描述IEFOW3C
borderCollapse设置表格边框是否合并为单边框,或者像在标准的HTML中那样分离。519Yes
borderSpacing设置分隔单元格边框的距离5M19Yes
captionSide设置表格标题的位置5MNoNoYes
emptyCells设置是否显示表格中的空单元格5M19Yes
tableLayout设置用来显示表格单元格、行以及列的算法5NoNoYes

Text 属性

属性描述IEFOW3C
color设置文本的颜色419Yes
font在一行设置所有的字体属性419Yes
fontFamily设置元素的字体系列。419Yes
fontSize设置元素的字体大小。419Yes
fontSizeAdjust设置/调整文本的尺寸5M1NoYes
fontStretch设置如何紧缩或伸展字体5MNoNoYes
fontStyle设置元素的字体样式419Yes
fontVariant用小型大写字母字体来显示文本419Yes
fontWeight设置字体的粗细419Yes
letterSpacing设置字符间距419Yes
lineHeight设置行间距419Yes
quotes设置在文本中使用哪种引号5M1Yes
textAlign排列文本419Yes
textDecoration设置文本的修饰419Yes
textIndent缩紧首行的文本419Yes
textShadow设置文本的阴影效果5M1Yes
textTransform对文本设置大写效果419Yes
unicodeBidi51Yes
whiteSpace设置如何设置文本中的折行和空白符419Yes
wordSpacing设置文本中的词间距619Yes

Standard 属性

属性描述IEFOW3C
dir设置或返回文本的方向519Yes
lang设置或返回元素的语言代码519Yes
title设置或返回元素的咨询性的标题519Yes
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: