2022年利用javascript创建功能强大的GUI(3)CSSHTML教程.docx

《2022年利用&#106avascript创建功能强大的GUI(3)CSSHTML教程.docx》由会员分享，可在线阅读，更多相关《2022年利用&#106avascript创建功能强大的GUI(3)CSSHTML教程.docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年利用javascript创建功能强大的GUI(3)CSSHTML教程function insert_link() {var str = document.selection.createRange().text;document.my_form.my_textarea.focus();var my_link = prompt(Enter URL:,http:/);if (my_link != null) {var sel = document.selection.createRange();sel.text = <a href= + my_link

2、+ > + str + </a>}return;}其次个函数insert_link()与format_sel()是相同的，加上prompt()，它们可以运用户输入一个超文本链接的值。运用prompt()的结果，我们可以将选定的文本和代码组合起来，创建一个连接。有了这些函数，我们就可以为用户创建全部类型的界面。下面我们来看一个例子。在CSS中运用系统颜色在网站上运用上面函数的最简洁的方法就是在“bold”、“italic”、和“link”按钮的onclick事务处理程序中调用这些函数，但这不够刺激。由于我们运用了selection对象，把自己限定在了IE/W

3、in平台上，我们就应当充分利用IE的特性，在CSS中运用用户定义的系统颜色，创建象我们在其他软件中看到的那样的动态按钮。下面我们首先来看看定义了工具栏、按钮、升起和按下二种按钮的状态的样式表。#toolbar {margin: 0;padding: 0;width: 262px;background: buttonface;border-top: 1px solid buttonhighlight;border-left: 1px solid buttonhighlight;border-bottom: 1px solid buttonshadow;border-right: 1px

4、 solid buttonshadow;text-align:right;}.button {background: buttonface;border: 1px solid buttonface;margin: 1;}.raised {border-top: 1px solid buttonhighlight;border-left: 1px solid buttonhighlight;border-bottom: 1px solid buttonshadow;border-right: 1px solid buttonshadow;background: buttonface;margin: 1;}.pressed {border-top: 1px solid buttonshadow;border-left: 1px solid buttonshadow;border-bottom: 1px solid buttonhighlight;border-right: 1px solid buttonhighlight;background: buttonface;margin: 1;}