当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 利用JavaScript创建功能强大的GUI(5)

HTML/XHTML教程
Web浏览器模式的选择机制
XHTML+CSS建站如何调用样式表
HTML5和CSS3新的WEB标准和浏览器支持
HTML代码:网页头部代码全清楚
网页制作:HTML代码编写的30条技巧
HTML教程:link标记的rel属性
网页设计参考:firefox的默认样式
网页设计初学者必看的30个网页制作秘笈
网页制作推荐使用的XHTML标记
网页HTML代码讲解:有序列表和无序列表
IE8开发人员工具的菜单讲解
提高用户体验与新窗口打开网页的关系
解决IE支持HTML5的问题
了解如何减少 reflow 次数
平面设计理论:创造视觉冲击力作品
网页HTML 有序列表ol 和无序列表 ul
HTML Frameset 例子代码
让输入框关闭自动完成（AutoComplete）功能
IE支持HTML5的解决方法
基础 HTML之目录问题(相对路径和绝对路径区别)

No. « 24 25 26 27 »

技术文章搜索

关键字

HTML/XHTML教程 中的 利用JavaScript创建功能强大的GUI(5)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-11-04   浏览: 118 ::
收藏到网摘: n/a



<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('b');"
src="/upload/tech/20091104/20091104154820_c81e728d9d4c2f636f067f89cc14862c.gif"
width="16" height="16"
align="middle"
alt="click to make your selection bold">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="format_sel('i');"
src="/upload/tech/20091104/20091104154820_a8e864d04c95572d1aece099af852d0a.gif"
width="16" height="16"
align="middle"
alt="click to make your selection italic">
<img class="button"
onmouseover="mouseover(this);"
onmouseout="mouseout(this);"
onmousedown="mousedown(this);"
onmouseup="mouseup(this);"
onclick="insert_link();"
src="/upload/tech/20091104/20091104154821_5ef0b4eba35ab2d6180b0bca7e46b6f9.gif"
width="32" height="16"
align="middle"
alt="click to add a link">

<textarea cols="30" rows="6" name="my_textarea"></textarea>

　　一个div中包含了三个按钮的图像，这样会使代码显得简洁。函数调用在<img>标记的事件处理程序中，我们向格式化函数传递一个将被改变样式的元素的引用，根据希望使用的格式（b表示粗体，i表示斜体），我们向format_sel()函数传递一个合适的参数。

结束语

　　当然，这只是创建工具栏的一种方法，还有许多其他方法也可以创建工具栏。读者创建的工具栏的功能也不必局限于本篇文章中涉及的功能，利用W3C DOM，可以很方便地改变一个文档的样式。

　　利用DOM操作，我们可以建立一个Word风格的工具栏，让用户定制显示卡的所有方面：改变字体的大小、文档的字体、改变栏目的宽度。结合使用CSS、JavaScript和DOM，我们能够创建与标准浏览器兼容的功能强大的应用软件GUI。