Firefox扩展 XUL中关于box的几点操作

编程技术  /  houtizong 发布于 3年前   64

主要是用到了box的两种常见形式：vbox(元素垂直摆放),hbox(元素水平摆放)

滚动条
设置

style="overflow:scroll;"

属性，可以给box添加滚动条

其实只要能设置style，就说明这玩意跟css有扯不开的关系，布局什么的就靠他

子元素排列
box有一个align的属性，缺省为stretch，它表示其中的子元素会发生纵向扩展
如果给box添加了一个图片标签，这个图片又比较小的情况下，图片会拉伸扭曲变形
可以把设为 start（如果是水平的box，它就是顶端对齐。如果是竖直的box，它就是左对齐）
还可以设为以下值

center   居中end      如果是水平的box，它就是底端对齐。如果是竖直的box，它就是右对齐。baseline 文本线对齐，只可以用在水平box上。stretch  自动扩展

删除子元素
删除某一个特定的子元素

box.removeChild(child_element)

删除所有的元素（一般初始化的时候用得着）

while (box.firstChild){ box.removeChild(box.firstChild);}

添加子元素

box.appendChild(child_element)

例如我要添加一个图片

var image = document.createElement("image"); //这个document要根据上下文来var image_src = "https://developer.mozilla.org/skins/mozilla/Fox3/img/mdc-logo.png";image.setAttribute("src",image_src);box.appendChild(image);

在某一位置插入元素的话可以结合jQuery来操作

$(child1_element).insertAfter($(child2_element))