我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

Prototype1.6 实战05 (Element)

<HTML>
 <HEAD>
  <TITLE> Element </TITLE>
<script src="prototype.js" type="text/javascript" /></script>
<style>
    .luck
    {
        color :  red;
    }
</style>
  <script>
        function _insert()
        {    
            //检查d1元素内是否有值
            if(!$('d1').empty())
            {
                alert($('d1').outerText);
            }
            //第一人参数<position,即要在哪添加>,第二个参数即要添加的内容
            Element.insert("d1","<input type='text' />");
            //直接指定元素的insert也可以,直接在参数里传内容
            $('d1').insert("<img src='' />");
        }

        function _remove()
        {
            $('d1').remove();
            //或用Element.remove('d1');
        }

        function _replace()
        {
            $('d1').replace("<div id='d1'>QQ</div>");
        }

        function _addClass()
        {
            $('t1').addClassName('luck');
        }

        function _removeClass()
        {
            $('t1').removeClassName('luck');
        }

        function _hide()
        {
            $('t1').hide();
        }

        function _show()
        {
            $('t1').show();
        }

  </script>
 </HEAD>

 <BODY>
    <div id="d1">
            dtest
    </div>
    <input type="button" value="添加" onclick="_insert();"/>
    <input type="button" value="替换" onclick="_replace();"/>
    <input type="button" value="删除" onclick="_remove();"/>
    <input type="text" value="请注意查看文字颜色" id="t1"/>
    <input type="button" value="添加class" onclick="_addClass()" />
    <input type="button" value="移除class" onclick="_removeClass()" />
    <input type="button" value="隐藏" onclick="_hide()" />
    <input type="button" value="显示" onclick="_show()" />
    <div id="framer">   <img src="http://www.baidu.com/img/baidu.gif" alt="点此还原为原来大小" onclick="$('framer').undoClipping();"/> </div> 
 </BODY>
 <script>
    (function()
        {
            //剪切层的大小 
            $('framer').makeClipping().setStyle({width: '100px' ,height: '100px'});
        })();

    
 </script>
</HTML>


posted on 2008-07-23 17:37 々上善若水々 阅读(317) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。
网站导航: