Style 对象

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

使用 Style 对象属性的语法:

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

Style 对象的属性:

  • 背景

  • 边框和边距

  • 布局

  • 列表

  • 杂项

  • 定位

  • 打印

  • 滚动条

  • 表格

  • 文本

  • 规范

Background 属性

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

Border 和 Margin 属性

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

Layout 属性

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

List 属性

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

Positioning 属性

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

Printing 属性

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

Scrollbar 属性 (IE-only)

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

Table 属性

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

Text 属性

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

标准属性

属性描述
dir设置或返回文本的方向
lang设置或返回元素的语言代码
title设置或返回元素的咨询性的标题

cssText 属性

它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表,去掉了包围属性和值的元素选择器的花括号。

将这一属性设置为非法的值将会抛出一个代码为 SYNTAX_ERR 的 DOMException 异常。当 CSS2Properties 对象是只读的时候,试图设置这一属性将会抛出一个代码为 NO_MODIFICATION_ALLOWED_ERR 的 DOMException 异常。

关于 CSS2Properties 对象

CSS2Properties 对象表示一组 CSS 样式属性及其值。它为 CSS 规范定义的每一个 CSS 属性都定义一个 JavaScript 属性。

一个 HTMLElement 的 style 属性是一个可读可写的 CSS2Properties 对象,就好像 CSSRule 对象的 style 属性一样。不过,Window.getComputedStyle() 的返回值是一个 CSS2Properties 对象,其属性是只读的。

访问 Style 对象

可以从文档的头部或特定的 HTML 元素访问 Style 对象。

从文档的头部访问 style 对象:

实例

var x = document.getElementsByTagName("STYLE");

访问指定元素的样式对象:

实例

var x = document.getElementById("myH1").style;

创建 Style 对象

您可以使用 document.createElement() 方法创建 <style> 元素:

实例

var x = document.createElement("STYLE");

您还可以设置已有元素的样式属性:

实例

document.getElementById("myH1").style.color = "red";


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
卓越综合高中|卓越综合高中
卓越综合高中
弥勒综合高中|弥勒综合高中
弥勒综合高中
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
昆明综合高中|昆明综合高中
昆明综合高中
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部