html5文档增加element,富文本:LayaAir下 HtmlDivElement的使用汇总

1.简单的Html属性设置:Bold、Font、FontSize、Color、下划线

【注意,不支持斜体、描边、span标签内嵌的方式】

示例如下:var div:HTMLDivElement=new HTMLDivElement();

div.innerHTML="

"color='red' " +

"href='www.baidu.com'>" +

"LayaBox

欢迎你的加入"

Laya.stage.addChild(div);2、获取Html文本的实际内容、获取html文本的实际宽高(contextWidth、contextHeight)

示例如下:var htmlDiv:HTMLDivElement=new HTMLDivElement();

var html:String = "使用";

html += "HTMLDivElement";

html += "创建的
";

html += "HTML文本";

htmlDiv.innerHTML=html;

htmlDiv.pos(50,200);

var txt:String = "";

var tTxt:String;

var tHTMLElement:HTMLElement;

for(var i:int = 0,n:int = htmlDiv._childs.length;i < n;i++)

{

tHTMLElement = htmlDiv.getChildAt(i) as HTMLElement;

if(tHTMLElement)

{

tTxt= tHTMLElement.text;

if(tTxt)

{

txt += tTxt;

}

}

}

trace("文本内容为"+txt);

trace("文本的实际宽度为"+htmlDiv.contextWidth,"文本的实际高度为"+htmlDiv.contextHeight)

Laya.stage.addChild(htmlDiv);3、设置文本的水平居中对齐(align需要和width配合使用),换行(
换行需要有行高)、空格( ;)

【注意:目前不支持文本的垂直居中对齐,开发可以将(图片的高度-文本的高度)/2的值赋给文本的Y值,进行垂直居中对齐的替代设置】

示例如下:var html3:HTMLDivElement=new HTMLDivElement();

html3.style.lineHeight=30;

html3.style.width=300;

html3.style.align="center";

html3.innerHTML="  我的第一行要换行";

Laya.stage.addChild(html3);

var sp:Sprite=new Sprite();

sp.graphics.drawRect(0,0,300,30,null,"#999999");

Laya.stage.addChild(sp);4、实现超链接

示例如下:public function HtmlDemo()

{

var div:HTMLDivElement=new HTMLDivElement();

div.innerHTML="LayaBox欢迎你的加入!";

div.on(Event.LINK,this,onLink);

Laya.stage.addChild(div);

}

private function onLink(data:*):void

{

// TODO Auto Generated method stub

Browser.window.location.href=data;

}5、实现html页面跳转

示例如下:var iHtml:HTMLIframeElement=new HTMLIframeElement();

Laya.stage.addChild(iHtml);

iHtml.href="res/html/test.html";6、简单的图片显示

示例如下:var imageHtml:HTMLDivElement=new HTMLDivElement();

imageHtml.innerHTML="boy.png";

Laya.stage.addChild(imageHtml);7、追加文本内容appendHtml

示例如下:var appendHtml:HTMLDivElement=new HTMLDivElement();

appendHtml.innerHTML="AAAAAA";

Laya.stage.addChild(appendHtml);

appendHtml.appendHTML("
  BBBBBBBBBB");

appendHtml.layout();

8、解决IOS手机上英文字母显示偏下的问题

在style样式中加垂直向上对齐valign:top属性

示例如下:var html:HTMLDivElement=new HTMLDivElement();

html.innerHTML = "朋友abc11''31ABC朋友百度";

Laya.stage.addChild(html);9、为HtmlDivElement设置行间距,leading属性,注意,必须设置valing='top'

示例如下:var t:HTMLDivElement = new HTMLDivElement ;

Laya.stage.addChild(t);

t.style.valign = "middle";

t.size(60, 120);

t.style.wordWrap = true;

t.style.leading = 10;

t.innerHTML = "akshfkjashfkjhakshjdfhkasjdfhsaf";

总结:以上的方法仅供参考,某些方法只是实现方式的一种,开发者也可以通过其他方式进行设置,如果有哪些方法没有涉及到的,欢迎开发者提出来,我们会陆续进行补充!