完美

[学习|工作|博客|交流平台|完美起航]
 详情

JavaScript之Dom操作

时间:[2017-06-02 23:24:12] 作者:[ admin ] 点击:[ 2676 ]

1.创建元素 

var div = document.createElement("div"); //创建一个div元素

2.将创建的元素添加到body里面

document.body.appendChild(div);//将创建的div元素追加到body里面

创建的元素不仅仅可以添加的body里面,还可以添加到指定的元素里面

var span = document.createElement("span");
div.appendChild(span); //将创建的span添加的div元素中
var div2 = document.getElementById("div");//从html文档中根据id获取div元素
div2.appendChild(div); 将创建的div添加到div2中

3.给创建的元素添加样式

div.style.width = "200px";//宽度
div.style.height = "200px";//高度
div.style.cursor = "pointer"; //鼠标指针样式
div.style.position = "fixed"; //把元素放置在static, relative, absolute 或 fixed 的位置
div.style.zIndex = "10000"; //设置元素的堆叠次序
div.style.top = "100px";//距离顶部的距离
div.style.left = "100px";//距离左边的距离
div.style.backgroundImage = url;//背景图片
div.style.backgroundRepeat = "no-repeat";//背景是否重复
div.style.backgroundPositionY = "bottom";//背景向下显示

支持的样式有如下:

Style 对象的属性:

  • 背景

  • 边框和边距

  • 布局

  • 列表

  • 杂项

  • 定位

  • 打印

  • 滚动条

  • 表格

  • 文本

  • 规范

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 和 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设置元信息5M1
Yes
counterIncrement设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器的增量。默认是1。5M1
Yes
counterReset设置其后是正数的计数器名称的列表。其中整数指示每当元素出现时计数器被设置的值。默认是0。5M1
Yes
cssFloat设置图像或文本将出现(浮动)在另一元素中的何处。5M19Yes
cursor设置显示的指针类型419Yes
direction设置元素的文本方向519Yes
display设置元素如何被显示419Yes
height设置元素的高度419Yes
markerOffset设置marker box的principal box距离其最近的边框边缘的距离5M1
Yes
marks设置是否cross marks或crop marks应仅仅被呈现于page box边缘之外5M1
Yes
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

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设置在文本中使用哪种引号5M1
Yes
textAlign排列文本419Yes
textDecoration设置文本的修饰419Yes
textIndent缩紧首行的文本419Yes
textShadow设置文本的阴影效果5M1
Yes
textTransform对文本设置大写效果419Yes
unicodeBidi
51
Yes
whiteSpace设置如何设置文本中的折行和空白符419Yes
wordSpacing设置文本中的词间距619Yes

标准属性

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

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 对象,其属性是只读的。


 2   0
标签:  JavaScript Dom Html Style
 相关评论