UniElement

UniElement 的属性值

style

方法

appendChild(aChild)

insertBefore(newChild, refChild?)

setAttribute(key, value)

getAttribute(key)

hasAttribute(key)

removeAttribute(key)

展示全部

# UniElement

UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

# UniElement 的属性值

名称	类型	必备	默认值	描述
classList	Array<string>	是	-	只读属性获取当前元素的的 class 属性的动态集合。
firstChild	UniElement \| null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
lastChild	UniElement \| null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
parentElement	UniElement \| null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
previousSibling	UniElement \| null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
nextElementSibling	UniElement \| null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。
children	Array<UniElement>	是	-	只读属性获取当前元素包含的子元素的集合
tagName	string	是	-	只读属性获取当前元素的标签名
nodeName	string	是	-	只读属性获取当前元素的元素名称
dataset	Map<string, any>	是	-	只读属性获取元素上自定义数据属性（data-*）的集合
attributes	Map<string, any>	是	-	只读属性获取元素上所有属性元素的集合
style	CSSStyleDeclaration	是	-	只读属性获取元素的CSS样式对象
scrollWidth	number	是	-	只读属性获取可滚动元素内容的总宽度，仅scroll-view、list-view组件支持，其他组件返回视图宽度
scrollHeight	number	是	-	只读属性获取可滚动元素内容的总高度，仅scroll-view、list-view组件支持，其他组件返回视图高度
scrollLeft	number	是	-	获取或修改元素滚动条到元素左边的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0
scrollTop	number	是	-	获取或修改元素滚动条到元素顶部的距离像素数，仅scroll-view、list-view组件支持。其他组件返回0
offsetLeft	number	是	-	只读属性元素的左边界偏移值单位px
offsetTop	number	是	-	只读属性元素的顶部边界偏移值单位px
offsetWidth	number	是	-	只读属性元素的布局宽度，宽度包含border、padding的数据值单位px
offsetHeight	number	是	-	只读属性元素的布局高度，高度包含border、padding的数据值单位px
ext	Map<string, any>	是	-	只读属性扩展属性

# style

App端
获取的是元素对象计算后的CSS样式集合对象，包括通过样式选择器设置的CSS样式。
Web端
获取的是元素对象style属性设置的CSS样式集合对象，不包括通过样式选择器设置的CSS样式。

# 方法

# appendChild(aChild)

将一个元素添加到指定父元素的子元素列表的末尾处。如果将被插入的元素已经存在于当前文档的文档树中，那么将会它从原先的位置移动到新的位置。

# 参数

名称	类型	必填	默认值	描述
aChild	UniElement	是	-	插入子元素对象

# insertBefore(newChild, refChild?)

在参考元素之前插入一个拥有指定父元素的子元素。如果给定的子元素是对文档中现有元素的引用，insertBefore() 会将其从当前位置移动到新位置。

# 参数

名称	类型	必填	默认值	描述
newChild	UniElement	是	-	插入子元素对象
refChild	UniElement \| null	否	-	UVUE DOM 元素对象，描述了 UVUE DOM 元素所普通具有的属性和方法。

# 返回值

类型	必备
UniElement \| null	否

# setAttribute(key, value)

设置指定元素上的某个属性值。如果设置的属性已经存在，则更新该属性值；否则使用指定的名称和值添加一个新的属性。

注意

setAttribute从HBuilderX 3.93起，调整为只能保存string类型属性值，需要保存其它类型数据请使用dataset属性。
为保证多端一致setAttribute不应用于修改本文档中的UniElement属性，如有此类需求应使用element.xxx设置，如element.scrollTop。其余绑定到内置组件的属性也尽量使用数据驱动而不是绕过vue去设置。

# 参数

名称	类型	必填	默认值	描述
key	string	是	-	属性名称
value	string	是	-	属性值域

# getAttribute(key)

获取元素指定的属性值，如果指定的属性不存在则返回null。

注意

getAttribute返回值从HBuilderX 3.93起，调整为string类型，不要使用此方法获取非string类型的属性值。如有非string需求，请使用对象的点操作符直接访问dateset属性，不通过getAttribute方法。
为保证多端一致getAttribute不应用于获取本文档中的UniElement属性，如有此类需求应使用element.xxx获取，如element.scrollTop。

# 参数

名称	类型	必填	默认值	描述
key	string	是	-	属性名称

# 返回值

类型	必备
string \| null	否

# hasAttribute(key)

返回改元素是否包含有指定的属性，属性存在则返回true，否则返回false。

# 参数

名称	类型	必填	默认值	描述
key	string	是	-	属性名称

# 返回值

类型
boolean

# removeAttribute(key)

从元素中删除一个属性，如果指定的属性不存在，则不做任何操作，也不会产生错误。

# 参数

名称	类型	必填	默认值	描述
key	string	是	-	属性名称

# getBoundingClientRect()

获取元素的大小及其相对于窗口的位置信息。

# 返回值

类型
DOMRect

# getDrawableContext()

获取组件的绘制对象，仅uvue页面中的 view 组件支持，其它组件不支持则返回null。

# 返回值

类型	必备
DrawableContext \| null	否

# getDrawableContext 兼容性

Android	iOS	web
3.9	4.11	x

# addEventListener(type, callback)

将指定的监听器注册到元素对象上，当该对象触发指定的事件时，指定的回调函数就会被执行。

# 参数

名称	类型	必填	默认值	描述
type	string	是	-	事件类型
callback	(event: T) => R	是	-	事件监听器 T表示event类型，R表示返回值类型

# 返回值

类型
UniCallbackWrapper

# removeEventListener(type, callbackWrapper)

删除使用 addEventListener 方法添加的事件监听器。

# 参数

名称	类型	必填	默认值	描述
type	string	是	-	事件类型
callbackWrapper	UniCallbackWrapper	是	-	事件监听回调封装类

# removeChild(aChild)

从元素中删除一个子元素，返回删除的元素。

# 参数

名称	类型	必填	默认值	描述
aChild	UniElement	是	-	被删除子元素对象

# 返回值

类型	必备
UniElement \| null	否

# remove()

把元素对象从它所属的 DOM 树中删除。

# dispatchEvent(type, value)

向一个指定的事件目标派发一个 Event，并以合适的顺序（同步地）调用此事件的监听器回调函数。

# 参数

名称	类型	必填	默认值	描述
type	string	是	-	事件类型
value	UniEvent	是	-	事件返回对象

# scrollTo(x, y)

使界面滚动到给定元素的指定坐标位置仅scroll-view、list-view组件支持

# 参数

名称	类型	必填	默认值	描述
x	number	是	-	x轴要滚动到坐标位置(单位px)
y	number	是	-	y轴要滚动到坐标位置(单位px)

# scrollBy(x, y)

使得元素滚动一段特定距离仅scroll-view、list-view组件支持

# 参数

名称	类型	必填	默认值	描述
x	number	是	-	x轴要滚动的距离(单位px)
y	number	是	-	y轴要滚动的距离(单位px)

# focus()

使元素获取焦点仅input、Textarea组件支持

# blur()

使元素丢失焦点仅input、Textarea组件支持

# takeSnapshot(options)

对当前组件进行截图，调用此方法会将当前组件（包含子节点）渲染结果导出成图片。成功会返回图片对应的临时文件路径，目前默认png格式

# 参数

名称

类型

必填

默认值

描述

options

TakeSnapshotOptions

是

组件截图的参数对象

名称	类型	必备	默认值	描述
type	string \| null	否	"file"	截图导出类型，目前仅支持 'file' 保存到临时文件目录
format	string \| null	否	"png"	截图文件格式，目前仅支持 'png'
success	(res: TakeSnapshotSuccess) => void \| null	否	-	接口调用成功的回调函数
fail	(res: TakeSnapshotFail) => void \| null	否	-	接口调用失败的回调函数
complete	(res: any) => void \| null	否	-	接口调用结束的回调函数（调用成功、失败都会执行）

# TakeSnapshotSuccess 的属性值

名称	类型	必备	默认值	描述
tempFilePath	string	是	-	截图保存的临时文件路径

# TakeSnapshotFail 的属性值

名称	类型	必备	默认值	描述
errMsg	string	是	-	-

# takeSnapshot 兼容性

Android	iOS	web
3.93	4.11	x

// 找到需要截图节点
const view = uni.getElementById('snapshot-content')!
// 进行截图
view.takeSnapshot({
    success: function (res) {
        // 打印截图文件临时路径
        console.log(res.tempFilePath)
        uni.showToast({
            title: '截图成功，路径：' + res.tempFilePath,
            icon: "none"
        })
    },
    fail: function (res) {
        console.log(res)
        uni.showToast({
            icon: 'error',
            title: '截图失败'
        })
    }
})

完整示例代码参考hello uni-app x

截图会在应用沙盒目录的cache目录产生临时文件，位置详见。
app端如需主动删除临时文件，使用uni.getFileSystemManager。
app端list-view、web-view组件性能优化仅渲染屏幕显示的内容，所以截图仅能截取到当前屏幕展示的内容。
app端scroll-view组件设置padding后，截图内容不会包含padding区域。
app端由于组件背景默认透明，所以截图图片默认底色为白色。

运营产品

uni-AD uni统计 uni发行 uni安全专题

开发者服务

问答社区开发者后台

技术文档

uni-app文档 uniCloud文档原生开发者支持文档 HBuilder文档

生态服务

插件市场 OAuth用户开放平台

关于我们： DCloud官网案例需求墙许可协议加入我们赞助我们

联系我们：商务合作：bd@dcloud.io 广告合作：uniad@dcloud.io

DCloud.io 数字天堂（北京）网络技术有限公司是

HTML5中国产业联盟发起单位

京公网安备：11010802035340号

国家信息安全等级保护三级，证书编号：11010813802-20001

# UniElement

# UniElement 的属性值

# style

# 方法

# appendChild(aChild)

# 参数

# insertBefore(newChild, refChild?)

# 参数

# 返回值

# setAttribute(key, value)

# 参数

# getAttribute(key)

# 参数

# 返回值

# hasAttribute(key)

# 参数

# 返回值

# removeAttribute(key)

# 参数

# getBoundingClientRect()

# 返回值

# getDrawableContext()

# 返回值

# getDrawableContext 兼容性

# addEventListener(type, callback)

# 参数

# 返回值

# removeEventListener(type, callbackWrapper)

# 参数

# removeChild(aChild)

# 参数

# 返回值

# remove()

# dispatchEvent(type, value)

# 参数

# scrollTo(x, y)

# 参数

# scrollBy(x, y)

# 参数

# focus()

# blur()

# takeSnapshot(options)

# 参数

# TakeSnapshotSuccess 的属性值

# TakeSnapshotFail 的属性值

# takeSnapshot 兼容性

本页导读