程序博客网 > 热血封神翅膀进阶数据

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

来源：互联网发布：热血封神翅膀进阶数据编辑：程序博客网时间：2024/06/01 21:22

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="默认字体" onfocus='input_focus(this)' onblur='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>

0 0

热血封神翅膀进阶数据

热血封神翅膀进阶数据

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子偏将军将军回忆录毛将军虎将军骄傲的将军上将军韩浚将军将军啊女将军领队首次参阅叶立三将军简介女将军唐冰简历甘祖昌将军简历女将军首次徒步受阅将军在马上进入她身王英光将军简历将军绳结磨穴r皇上开国将军张中如逝世将军在上免费观看全集将军在上60集免费看罗炳辉将军简历将军在上全集红将军多少钱一盒将军的现代夫人 55年授衔将军名单将军家的小矫娘将军的荣耀破解版蓝带将军啤酒价格废后将军全文阅读在世的开国将军将军媚全文阅读赛银将军防盗门将军是什么生肖将军求你温柔些钢将军防盗门拜占庭将军问题将军是什么级别开国将军名单长剩将军txt下载将军的荣耀下载邓宝珊将军纪念馆陶将军瓷砖价格