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>