上一节:
下一节:

  JavaScript HTML DOM Style 对象参考

  • Style 对象

    Style对象表示单个样式语句。

  • Style 对象属性

    可以在Style对象上使用以下属性：
    “CSS”列指示定义属性的CSS版本（CSS1，CSS2或CSS3）。
    属性 描述 CSS
    alignContent 当项目不使用所有可用空间时，设置或返回灵活容器内线之间的对齐方式 3
    alignItems 设置或返回灵活容器内项目的对齐方式 3
    alignSelf 设置或返回灵活容器内所选项目的对齐方式 3
    animation 下面所有动画属性的简写属性，dynamicPlayState属性除外 3
    animationDelay 动画开始时设置或返回 3
    animationDirection 设置或返回动画是否应在交替循环中反向播放 3
    animationDuration 设置或返回动画完成一个循环所需的秒数或毫秒数 3
    animationFillMode 设置或返回动画在执行时间之外应用的值 3
    animationIterationCount 设置或返回动画应播放的次数 3
    animationName 设置或返回@keyframes动画的名称 3
    animationTimingFunction 设置或返回动画的速度曲线 3
    animationPlayState 设置或返回动画是否正在运行或暂停 3
    background 在一个声明中设置或返回所有背景属性 1
    backgroundAttachment 设置或返回背景图像是固定的还是与页面一起滚动 1
    backgroundColor 设置或返回元素的背景颜色 1
    backgroundImage 设置或返回元素的背景图像 1
    backgroundPosition 设置或返回背景图像的起始位置 1
    backgroundRepeat 设置或返回如何重复（平铺）背景图像 1
    backgroundClip 设置或返回背景的绘画区域 3
    backgroundOrigin 设置或返回背景图像的定位区域 3
    backgroundSize 设置或返回背景图像的大小 3
    backfaceVisibility 设置或返回元素在不面向屏幕时是否应该可见 3
    border 在一个声明中设置或返回borderWidth，borderStyle和borderColor 1
    borderBottom 在一个声明中设置或返回所有borderBottom属性 1
    borderBottomColor 设置或返回底部边框1的颜色 1
    borderBottomLeftRadius 设置或返回左下角边框的形状 3
    borderBottomRightRadius 设置或返回右下角边框的形状 3
    borderBottomStyle 设置或返回底部边框的样式 1
    borderBottomWidth 设置或返回底部边框的宽度 1
    borderCollapse 设置或返回表边框是否应折叠为单个边框 2
    borderColor 设置或返回元素边框的颜色（最多可包含四个值） 1
    borderImage 用于设置或返回所有borderImage属性的简写属性 3
    borderImageOutset 设置或返回边框图像区域延伸到边框之外的量 3
    borderImageRepeat 设置或返回是否应重复，舍入或拉伸图像边框 3
    borderImageSlice 设置或返回图像边框的向内偏移 3
    borderImageSource 设置或返回要用作边框的图像 3
    borderImageWidth 设置或返回图像边框的宽度 3
    borderLeft 在一个声明中设置或返回所有borderLeft属性 1
    borderLeftColor 设置或返回左边框的颜色 1
    borderLeftStyle 设置或返回左边框的样式 1
    borderLeftWidth 设置或返回左边框的宽度 1
    borderRadius 用于设置或返回所有四个borderRadius属性的简写属性 3
    borderRight 在一个声明中设置或返回所有borderRight属性 1
    borderRightColor 设置或返回右边框的颜色 1
    borderRightStyle 设置或返回右边框的样式 1
    borderRightWidth 设置或返回右边框的宽度 1
    borderSpacing 设置或返回表格中单元格之间的空间 2
    borderStyle 设置或返回元素边框的样式（最多可包含四个值） 1
    borderTop 在一个声明中设置或返回所有borderTop属性 1
    borderTopColor 设置或返回顶部边框的颜色 1
    borderTopLeftRadius 设置或返回左上角边框的形状 3
    borderTopRightRadius 设置或返回右上角边框的形状 3
    borderTopStyle 设置或返回顶部边框的样式 1
    borderTopWidth 设置或返回顶部边框的宽度 1
    borderWidth 设置或返回元素边框的宽度（最多可包含四个值） 1
    bottom 设置或返回定位元素的底部位置 2
    boxDecorationBreak 在换行符时设置或返回元素的背景和边框的行为，或者对于换行符，设置或返回行内元素的行为。 3
    boxShadow 将一个或多个阴影附加到框中 3
    boxSizing 允许您以某种方式定义某些元素以适合某个区域 3
    captionSide 设置或返回表格标题的位置 2
    clear 设置或返回元素相对于浮动对象的位置 1
    clip 设置或返回定位元素的哪个部分可见 2
    color 设置或返回文本的颜色 1
    columnCount 设置或返回元素应分成的列数 3
    columnFill 设置或返回填充列的方式 3
    columnGap 设置或返回列之间的间隙 3
    columnRule 用于设置或返回所有columnRule属性的简写属性 3
    columnRuleColor 设置或返回列之间规则的颜色 3
    columnRuleStyle 在列之间设置或返回规则的样式 3
    columnRuleWidth 设置或返回列之间规则的宽度 3
    columns 用于设置或返回columnWidth和columnCount的简写属性 3
    columnSpan 设置或返回元素应跨越的列数 3
    columnWidth 设置或返回列的宽度 3
    content 与：before和：after伪元素一起使用，以插入生成的内容 2
    counterIncrement 增加一个或多个计数器 2
    counterReset 创建或重置一个或多个计数器 2
    cursor 设置或返回要为鼠标指针显示的光标类型 2
    direction 设置或返回文本方向 2
    display 设置或返回元素的显示类型 1
    emptyCells 设置或返回是否显示空单元格的边框和背景 2
    filter 设置或返回图像滤镜（视觉效果，如模糊和饱和度） 3
    flex 设置或返回项目的长度，相对于其余项目 3
    flexBasis 设置或返回灵活项目的初始长度 3
    flexDirection 设置或返回灵活项目的方向 3
    flexFlow flexDirection和flexWrap属性的简写属性 3
    flexGrow 设置或返回项目相对于其余项目的增长量 3
    flexShrink 设置或返回项目相对于其余项目缩小的方式 3
    flexWrap 设置或返回灵活项目是否应该换行 3
    cssFloat 设置或返回元素的水平对齐方式 1
    font 在一个声明中设置或返回fontStyle，fontVariant，fontWeight，fontSize，lineHeight和fontFamily 1
    fontFamily 设置或返回文本的字体系列 1
    fontSize 设置或返回文本的字体大小 1
    fontStyle 设置或返回字体样式是正常，斜体还是倾斜 1
    fontVariant 设置或返回字体是否应以小写字母显示 1
    fontWeight 设置或返回字体的粗体 1
    fontSizeAdjust 发生字体回退时保留文本的可读性 3
    fontStretch 从字体系列中选择正常，压缩或扩展的面 3
    hangingPunctuation 指定标点符号是否可以放在行框外 3
    height 设置或返回元素的高度 1
    hyphens 设置如何拆分单词以改进段落的布局 3
    icon 为作者提供使用标志性对等元素设置元素样式的能力 3
    imageOrientation 指定用户代理应用于图像的右或顺时针方向的旋转 3
    isolation 定义元素是否必须创建新的堆叠内容 3
    justifyContent 当项目不使用所有可用空间时，设置或返回灵活容器内项目之间的对齐方式。 3
    left 设置或返回定位元素的左侧位置 2
    letterSpacing 设置或返回文本中字符之间的空格 1
    lineHeight 设置或返回文本中行之间的距离 1
    listStyle 在一个声明中设置或返回listStyleImage，listStylePosition和listStyleType 1
    listStyleImage 设置或返回图像作为列表项标记 1
    listStylePosition 设置或返回列表项标记的位置 1
    listStyleType 设置或返回列表项标记类型 1
    margin 设置或返回元素的边距（最多可包含四个值） 1
    marginBottom 设置或返回元素的下边距 1
    marginLeft 设置或返回元素的左边距 1
    marginRight 设置或返回元素的右边距 1
    marginTop 设置或返回元素的上边距 1
    maxHeight 设置或返回元素的最大高度 2
    maxWidth 设置或返回元素的最大宽度 2
    minHeight 设置或返回元素的最小高度 2
    minWidth 设置或返回元素的最小宽度 2
    navDown 使用向下箭头导航键设置或返回导航的位置 3
    navIndex 设置或返回元素的Tab键顺序 3
    navLeft 使用向左箭头导航键设置或返回导航的位置 3
    navRight 使用向右箭头导航键设置或返回导航位置 3
    navUp 使用向上箭头导航键设置或返回导航的位置 3
    objectFit 指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中 3
    objectPosition 指定替换元素在其框内的对齐方式 3
    opacity 设置或返回元素的不透明度级别 3
    order 设置或返回灵活项目相对于其余项目的顺序 3
    orphans 设置或返回元素内发生分页时必须留在页面底部的元素的最小行数 2
    outline 在一个声明中设置或返回所有大纲属性 2
    outlineColor 设置或返回元素周围轮廓的颜色 2
    outlineOffset 偏移轮廓，并将其绘制到边框边缘之外 3
    outlineStyle 设置或返回元素周围的轮廓样式 2
    outlineWidth 设置或返回元素周围轮廓的宽度 2
    overflow 设置或返回如何处理在元素框外部呈现的内容 2
    overflowX 指定如果内容的左/右边缘溢出元素的内容区域，该如何处理内容的左/右边缘 3
    overflowY 指定如果内容的上/下边缘溢出元素的内容区域，该如何处理内容的上/下边缘 3
    padding 设置或返回元素的填充（最多可以包含四个值） 1
    paddingBottom 设置或返回元素的底部填充 1
    paddingLeft 设置或返回元素的左边距 1
    paddingRight 设置或返回元素的右边距 1
    paddingTop 设置或返回元素的顶部填充 1
    pageBreakAfter 设置或返回元素后的分页行为 2
    pageBreakBefore 在元素之前设置或返回分页符行为 2
    pageBreakInside 设置或返回元素内的分页符行为 2
    perspective 设置或返回有关如何查看3D元素的透视图 3
    perspectiveOrigin 设置或返回3D元素的底部位置 3
    position 设置或返回用于元素的定位方法的类型（静态，相对，绝对或固定） 2
    quotes 设置或返回嵌入式引用的引号类型 2
    resize 设置或返回用户是否可以调整元素的大小 3
    right 设置或返回定位元素的正确位置 2
    tableLayout 设置或返回布置表格单元格，行和列的方式 2
    tabSize 设置或返回制表符的长度 3
    textAlign 设置或返回文本的水平对齐方式 1
    textAlignLast 当text-align为“justify”时，设置或返回块的最后一行或强制换行符之前的行的对齐方式 3
    textDecoration 设置或返回文本的装饰 1
    textDecorationColor 设置或返回文本修饰的颜色 3
    textDecorationLine 设置或返回文本修饰中的行类型 3
    textDecorationStyle 设置或返回文本修饰中的线条样式 3
    textIndent 设置或返回第一行文本的缩进 1
    textJustify 设置或返回text-align为“justify”时使用的对齐方法 3
    textOverflow 设置或返回文本溢出包含元素时应发生的情况 3
    textShadow 设置或返回文本的阴影效果 3
    textTransform 设置或返回文本的大小写 1
    top 设置或返回定位元素的顶部位置 2
    transform 对元素应用2D或3D变换 3
    transformOrigin 设置或返回已转换元素的位置 3
    transformStyle 设置或返回嵌套元素在3D空间中的呈现方式 3
    transition 用于设置或返回四个过渡属性的简写属性 3
    transitionProperty 设置或返回转换效果的CSS属性 3
    transitionDuration 设置或返回转换效果完成所需的秒数或毫秒数 3
    transitionTimingFunction 设置或返回过渡效果的速度曲线 3
    transitionDelay 设置或返回转换效果开始时 3
    unicodeBidi 设置或返回是否应覆盖文本以支持同一文档中的多种语言 2
    userSelect 设置或返回是否可以选择元素的文本 2
    verticalAlign 设置或返回元素中内容的垂直对齐方式 1
    visibility 设置或返回元素是否应该可见 2
    whiteSpace 设置或返回如何处理文本中的制表符，换行符和空格 1
    width 设置或返回元素的宽度 1
    wordBreak 设置或返回非CJK脚本的换行规则 3
    wordSpacing 设置或返回文本中单词之间的间距 1
    wordWrap 允许打破长而牢不可破的单词并将其换行到下一行 3
    widows 设置或返回必须在页面顶部可见的元素的最小行数 2
    zIndex 设置或返回定位元素的堆栈顺序 2

  • 访问样式对象

    Style对象可以从文档的head部分访问，也可以从特定的HTML元素访问。从文档的head部分访问样式对象： 
    var x = document.getElementsByTagName("STYLE");
    尝试一下
    访问指定元素的样式对象： 
    var x = document.getElementById("myH1").style;
    尝试一下

  • 创建样式对象

    您可以使用document.createElement()方法创建<style>元素： 
    var x = document.createElement("STYLE");
    尝试一下
    您还可以设置现有元素的样式属性： 
    document.getElementById("myH1").style.color = "red";
    尝试一下

  • 相关页面

    HTML教程：HTML CSS
    CSS教程：CSS教程
    HTML参考：HTML <style>标记
    CSS参考：CSS属性
上一节:
下一节: