HTML元素

480次阅读

共计 2428 个字符，预计需要花费 7 分钟才能阅读完成。

HTML 元素插件的 IHTMLElementInstance 接口继承自 IDOMInstance，增加了特定于 HTML 元素的 API。在 DOM 模式下，可以使用 IDOMInstance 的 getElement()方法通过标准 DOM API 访问 HTML 元素。但是，这些方法仍然可以在工作器模式下使用。大多数方法都是异步的，因为在这种情况下，更新是通过在工作器和 DOM 之间发送消息来管理的。

请参阅实例事件以获取标准实例事件对象属性。

"click"：当 HTML 元素或其内容的任何部分被点击时触发。此事件会针对目标元素重复触发，然后是所有父元素，直到主 HTML 元素，模拟事件冒泡。事件对象有两个附加属性 targetId 和 targetClass，可用于识别被点击的元素。
"animationend"：当 HTML 元素内的任何 CSS 动画结束时触发（基于同名的 DOM 事件，但请注意，此事件是由 Construct 而不是 DOM 派发的）。事件对象有三个附加属性：targetId 和 targetClass，可用于识别动画结束的元素，以及 animationName，用于识别结束的 CSS 动画的名称（如 @keyframes 规则所定义）。

以下是一些主要的 API：

setContent(str, type = "html", selector = "", isAll = false)：用给定的字符串 str 替换 HTML 元素中的一些内容。字符串根据类型解释，类型必须是 "html"、"bbcode" 或 "text" 之一。要替换内容的位置由 CSS 选择器字符串指定。可以为空，以替换整个主 HTML 元素的内容。如果设置了 isAll 标志，则更新所有匹配选择器的元素，否则只更新第一个匹配的元素。
insertContent(str, type = "html", atEnd = true, selector = "", isAll = false)：将字符串内容 str 插入 HTML 元素中。字符串根据类型解释，类型必须是 "html"、"bbcode" 或 "text" 之一。要插入内容的位置由 CSS 选择器字符串指定。可以为空，以将内容插入主 HTML 元素。atEnd 标志如果为 true，则在末尾插入内容，如果为 false，则在开头插入。如果设置了 isAll 标志，则更新所有匹配选择器的元素，否则只更新第一个匹配的元素。
setContentClass(mode, classArr, selector, isAll = false)：根据模式添加、切换或删除元素类，模式必须是 "add"、"toggle" 或 "remove" 之一。要在 classArr 中修改的类作为字符串数组给出。要更改的位置由 CSS 选择器字符串指定。可以为空，以更改主 HTML 元素的类。如果设置了 isAll 标志，则更新所有匹配选择器的元素，否则只更新第一个匹配的元素。
setContentAttribute(mode, attrib, value, selector, isAll = false)：根据模式添加或删除元素属性，模式必须是 "set" 或 "remove" 之一。要修改的属性名称由 attrib 指定，其值作为 value 的字符串（如果删除属性，则忽略）。要更改的位置由 CSS 选择器字符串指定。可以为空，以更改主 HTML 元素的属性。如果设置了 isAll 标志，则更新所有匹配选择器的元素，否则只更新第一个匹配的元素。
setContentCssStyle(propName, value, selector, isAll)：设置元素的样式。要修改的 CSS 属性名称由 propName 指定，可以使用 CSS 命名（例如 "font-size"）或 JavaScript 命名（例如 "fontSize"）。要设置的此属性的值由 value 的字符串给出；设置为空字符串以将样式恢复到默认值。要更改的位置由 CSS 选择器字符串指定。可以为空，以更改主 HTML 元素的样式。如果设置了 isAll 标志，则更新所有匹配选择器的元素，否则只更新第一个匹配的元素。
setScrollPosition(selector, direction, position)：设置元素的水平或垂直滚动位置。要滚动的 HTML 元素由 CSS 选择器字符串 selector 给出，可以设置为空字符串以滚动主 HTML 元素。此操作仅滚动一个匹配选择器的元素。direction 必须设置为 "left" 以设置滚动左（水平）位置或 "top" 以设置滚动顶部（垂直）位置。position 值是要设置的滚动位置，以 CSS 像素为单位。
htmlContent：主 HTML 元素的完整内部 HTML 的字符串。也可以分配此属性以更改 HTML 元素的全部内容。
textContent：主 HTML 元素的完整内部文本的字符串，以纯文本形式（无 HTML 标签）。也可以分配此属性以更改 HTML 元素的全部文本内容。

createSpriteImgElement(spriteInst, selector, insertAt, id, class_)：创建一个元素，其中包含给定 ISpriteInstance 的当前图像的内容，并将其插入到 HTML 元素中。要插入的位置由 CSS 选择器字符串指定。insertAt 参数必须是 "start"、"end" 或 "replace" 之一的字符串，指示如何插入图像元素。id 和 class_参数是可选的字符串，用于为插入的图像元素设置 ID 或类，这有助于使用 CSS 轻松样式化插入的图像。

positionInstanceAtElement(worldInst, selector)：将给定的 IWorldInstance 的位置和大小设置为与特定 HTML 元素（由 CSS 选择器字符串给出）的位置和大小相匹配。

这种方法提供了一种使用不可见的 HTML 和 CSS 进行复杂布局的方式，同时使用其他对象显示实际内容，允许充分利用 Z 顺序、效果等。

正文完