HTML5技术

HTML5 元素属性介绍 - polk6

字号+ 作者:H5之家 来源:H5之家 2017-03-28 10:01 我要评论( )

HTMLElement 表示所有的 HTML 元素。 这里将以事件属性和非事件属性的分类进行介绍。 事件属性大多继承自GlobalEventHandlers,非事件属性大多继承自Element。 菜单 1. 2. 3. 4. 1. 获取HTMLElement元素方式 通过DOM,有以下4种方式直接获取HTMLElement对象

HTMLElement 表示所有的 HTML 元素。

这里将以事件属性和非事件属性的分类进行介绍。

事件属性大多继承自GlobalEventHandlers,非事件属性大多继承自Element。

菜单

1.

2.

3.

4.

 

1. 获取HTMLElement元素方式

通过DOM,有以下4种方式直接获取HTMLElement对象:

(elementID) :获取指定ID的第一个元素。

(className) :获取一个class属性含有指定值的元素数组 。

(nameValue) :获取一个name属性为指定值的元素数组。

(elementName)等方式来获取指定元素 :获取一个指定元素名称的元素数组。

 

2. 非事件属性

说明:包含从Element继承的以及自身独有的属性

属性名称 属性类型 说明

element.attributes 只读 NamedNodeMap 获取此元素的所有属性集合对象

HTMLElement.contentEditable

"true"、"false" or

"inherit"(默认)

获取或设置元素的可编辑状态

element.children 只读 HTMLCollection 获取一个包含该元素下子元素的数组

element.classList 只读

获取一个包含该元素class的数组。

element.className DOMString

设置或获取元素的class属性

eg:<button></buttom> =>  'a b'

element.clientHeight 只读 double 获取元素内部的像素高度;包含内边距,但不包括水平滚动条、边框和外边距。

element.clientLeft 只读 double 获取元素的左边框的像素宽度。不包括左外边距和左内边距。

element.clientTop 只读 double 获取元素的顶部边框的像素宽度。不包括顶部外边距或顶部内边距

element.clientWidth 只读 double 获取元素的内部像素宽度。包括内边距,但不包括垂直滚动条、边框和外边距。

HTMLElement.dataset 只读 DOMStringMap 获取一个包含此元素的所有以 data- 开头的自定义数据属性的数组。

HTMLElement.dir  DOMString 设置或获取元素的内容书写方向

HTMLElement.draggable Boolean 设置或获取元素是否可拖动

HTMLElement.hidden Boolean 设置或获取元素是否隐藏

HTMLElement.id DOMString 设置或获取元素的id

HTMLElement.isContentEditable 只读 Boolean 获取元素的内容是否可编辑状态

element.innerHTML DOMString 以HTML代码格式设置获取元素内的内容。

element.innerText DOMString 设置或获取元素内的文本内容。

element.namespaceURI 只读 DOMString 获取元素的命名空间。

HTMLElement.offsetHeight 只读 double 获取元素的像素高度;高度包含了内边距、边框、滚动条及css高度等范围

HTMLElement.offsetLeft 只读 double

获取当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界

偏移的像素值。

HTMLElement.offsetParent 只读 Element 获取元素的父元素

HTMLElement.offsetTop 只读 double 获取元素与其 offsetParent 元素的顶部距离

HTMLElement.offsetWidth 只读 double 获取元素的像素宽度;包含了内边距、边框、滚动条及内容宽度等范围

HTMLElement.style CSSStyleDeclaration 设置或获取元素的样式对象

element.scrollHeight 只读 double

获取元素的内容区域全部高度。包括边距、整体内容,不包括水平滚动条。

若获取的值比clientHeight小,将返回 clientHeight。

element.scrollLeft double 设置或获取元素水平滚动条到最左边的距离

element.scrollTop double 设置或获取元素垂直滚动条到顶部的距离

element.scrollWidth 只读 double

获取元素的内容区域全部宽度。包括边距、整体内容,不包括垂直滚动条。

若获取的值比clientWidth小,将返回 clientWidth。

HTMLElement.tabIndex long 设置或获取元素的tab顺序

element.tagName 只读 DOMString 获取元素的元素名称,以大写格式返回。eg:<div></div> // =>DIV

HTMLElement.title DOMString 设置或获取元素的title

 

3. 事件属性 3.1 继承自GlobalEventHandlers的事件属性

属性名称 事件说明

onabort 中断事件;如img的中断下载。

onblur 当元素失去焦点时触发

onerror 错误发生时触发;如Js运行错误。在window可注册一个全局的error事件处理函数用于收集错误报告。

onfocus 当元素获取焦点时触发

onchange 当元素内容发生变更并失去焦点时触发

onclick 点击元素时触发

oncontextmenu 在元素范围内右键显示菜单时触发

ondblclick 双击元素时触发

ondrag 拖动元素时触发

ondragend 元素拖动结束时触发

ondragenter 当其他元素拖动到该元素范围内时触发

ondragexit 该元素被拖动到某一拖动区域,并在拖动区域内释放鼠标时,该元素将触发此事件

ondragleave 当其他元素拖动到该元素范围内后再拖动出去时触发

ondragover 当其他元素在该元素范围内进行拖动时触发

ondragstart 元素开始拖动时触发

onDrop 其他元素拖到该元素范围内并释放时触发

oninput <input>、<textarea>等元素value属性的值由输入设备改变时,就会触发input事件

onkeydown 当元素获取焦点并且按下键盘按键时会触发

onkeypress 当元素获取焦点并且完成一次键盘按键的按下和弹起时会触发

onkeyup 当元素获取焦点并且键盘按键弹起时会触发

onload 元素加载完成后触发

onmousedown 在元素范围内按下鼠标按键时会触发

onmouseenter 在鼠标进入元素范围内时会触发

onmouseleave 在鼠标离开元素范围时会触发

onmousemove 鼠标在元素范围内移动时会触发

onmouseout 在鼠标离开元素范围时会触发,推荐使用 onmouseleave

onmouseover 鼠标在元素范围内移动时会触发,推荐使用 onmousemove

onmouseup 在元素范围内弹起鼠标按键时会触发

onmousewheel 鼠标在元素范围内使用滚时会触发

onscroll 元素进行滚动时触发;包括水平、垂直滚动

注意: mouseover/mouseout 与  mouseenter/mouseleave 的差别可查看此链接

 

3.2 自身的事件属性

属性名称 事件说明

onTouchStart 在元素范围内开始触摸

onTouchEnd 在元素上结束触摸

onTouchMove  在元素范围内触摸移动

onTouchEnter  触摸点进入元素范围内

onTouchLeave  触摸点离开元素范围

onTouchCancel 在元素范围内触摸结束

 

4. 扩展阅读

HTMLElement:https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement

Element:https://developer.mozilla.org/zh-CN/docs/Web/API/Element

GlobalEventHandlers:https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers

部分在线Demo:

 

==================================系列文章==========================================

本篇文章:6.8 HTML5 元素属性介绍

Web开发之路系列文章

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • H5弹性盒布局的使用(父容器属性) - novai-L

    H5弹性盒布局的使用(父容器属性) - novai-L

    2017-03-25 14:01

  • HTML5本地图片裁剪并上传 - QxQstar

    HTML5本地图片裁剪并上传 - QxQstar

    2017-03-25 14:00

  • Html5游戏框架createJS组件--EaselJS - 叶超Luka

    Html5游戏框架createJS组件--EaselJS - 叶超Luka

    2017-03-22 12:01

  • HTML5学习笔记 - 小僵尸

    HTML5学习笔记 - 小僵尸

    2017-03-22 12:00

网友点评