web前端开发常用的几个js效果

web前端开发常用的几个js

一.table换行奇数和偶数行不同的颜色


二.input type=“text” 文本里面的默认字体颜色和获取焦点后的字体颜色变换


三.iframe 自适应调用页面的宽度和高度

源代码:

实例1table换行奇数和偶数行不同的颜色

<script type="text/javascript">

    function load()

            {

                vartrs=document.getElementById("table1").getElementsByTagName("tr");

                for(vari=0;i<trs.length;i++)

                {

                    if(i%2==0)

                    {

                        trs[i].style.backgroundColor="#f7f7f7";

                    }

                    else

                    {

                        trs[i].style.backgroundColor="#ffffff";

                    }

                }

            }

</script>  

在html页面里 初始化

<body onLoad="load()">

注意table里的id

<table width="730" border="0"cellspacing="1" cellpadding="1" id="table1">

实例2 input type=“text” 文本里面的默认字体颜色和获取焦点后的字体颜色变换

<script>

    var input_focus = function(t){

        t.value = '';

        t.style.color = '#676767';

    }

    var input_blur = function(t){

        if(t.value==''){

            t.value = '';

            t.style.color ='#D0D0D0';

        }

     }

</script>

<input type="text" placeholder="默认字体" οnfοcus='input_focus(this)' οnblur='input_blur(this)'/>


实例3 iframe 自适应调用页面的宽度和高度

调用iframe的页面

<iframesrc="text.html" id="main" width="100%"height="100%" frameborder="0" scrolling="auto"></iframe>

备注:注意iframe里的id

Text.html页面里的js

  <scripttype="text/javascript">

   $(window.parent.document).find("#main").load(function(){

    var main =$(window.parent.document).find("#main");

    var thisheight = $(document).height()+50;     //+50看页面的高度加数值

    main.height(thisheight);

    });

</script>

 



  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值