工作中常用css样式总结
一、HTML隐藏文本输入框
有三种方法:
1、<input type="hidden" value=""> 这是对任何元素都起作用的;
2、<input type="text" value="" "style="display:none">或<input type="text" value="" style="visibility:hidden">
3、<input type="text" value="" style="width:0;height:0">
二、<select>标签中设置默认选中选项
有两种方法:
1、第一种通过<select>的属性来设置选中项,这种方式需要后台控制默认选项;
1 < select id = "sel" > 2 < option value = "1" >1</ option > 3 < option value = "2" selected = "selected" >2</ option > 4 < option value = "3" >3</ option > 5 </ select >
2、通过前段js来控制选中的项;
1 < script type = "text/javascript" > 2 function change(){ 3 document.getElementById("sel")[2].selected=true; 4 } 5 </ script > 6 < select id = "sel" > 7 < option value = "1" >1</ option > 8 < option value = "2" >2</ option > 9 < option value = "3" >3</ option > 10 </ select > 11 < input type = "button" value = "修改" onclick = "change()" />
(1)、获取<select>标签选中项文本的js代码为:
1 var val = document.all.Item.options[document.all.Item.selectedIndex].text 2 var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;
(2)、动态创建select
1 function createSelect(){ 2 var mySelect = document.createElement( "select" ); 3 mySelect.id = "mySelect" ; 4 document.body.appendChild(mySelect); 5 }
(3)、添加选项option
1 function addOption(){ 2 //根据id查找对象, 3 var obj=document.getElementById( 'mySelect' ); 4 //添加一个选项 5 obj.add( new Option( "文本" , "值" )); 6 }
(4)、删除所有选项option
1 function removeAll(){ 2 var obj=document.getElementById( 'mySelect' ); 3 obj.options.length=0; 4 }
(5)、删除一个选项option
1 function removeOne(){ 2 var obj=document.getElementById( 'mySelect' ); 3 //index,要删除选项的序号,这里取当前选中选项的序号 4 var index=obj.selectedIndex; 5 obj.options.remove(index); 6 }
(6)、获得选项option的值
1 var obj=document.getElementById( 'mySelect' ); 2 var index=obj.selectedIndex; //序号,取当前选中选项的序号 3 var val = obj.options[index].value;
(7)、获得选项option的文本
1 var obj=document.getElementById( 'mySelect' ); 2 var index=obj.selectedIndex; //序号,取当前选中选项的序号 3 var val = obj.options[index].text;
(8)、修改选项option
1 ar obj=document.getElementById( 'mySelect' ); 2 var index=obj.selectedIndex; //序号,取当前选中选项的序号 3 var val = obj.options[index]= new Option( "新文本" , "新值" );
(9)、删除select
1 function removeSelect(){ 2 var mySelect = document.getElementById( "mySelect" ); 3 mySelect.parentNode.removeChild(mySelect); 4 }
三、都是表格的元素:
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。