javascript
JS控制DIV的显示隐藏 。js中radio的取值 。JS控制select的方法(摘取)。js 控制表单中SELECT
JS控制DIV的顯示隱藏??
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div隱藏與顯示</title>
<style type=text/css>
#menus {
?????? background-color: #c4cff0;??????
????? }
</style>
<script?? language=javascript>
function Layer_HideOrShow(cur_div)
{ var current=document.getElementById(cur_div);
?? if(current.style.visibility=="hidden")
???? {
?????? current.style.visibility ="visible";
???? }
?? else
??? {
????? current.style.visibility ="hidden";
??? }
}
</script>
</head>
<body>
<p> </p>
<table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101">
<tr>
?? <td>
?? <a href="#" οnclick="Layer_HideOrShow('menus');"><img border="0" src="http://www.shuifutour.com/images/456.gif" width="153" height="25"></a></td>
</tr>
<tr>
?? <td>
?? <div id="menus">
??? <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2">
???? <tr>
????? <td> </td>
???? </tr>
??? </table>
?? </div></td>
</tr>
</table>
</body>
</html>
====================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
???? if (document.getElementById){
???????? target=document.getElementById(targetid);
???????????? if (target.style.display=="block"){
???????????????? target.style.display="none";
???????????? } else {
???????????????? target.style.display="block";
???????????? }
???? }
}
-->
</script>
<style type="text/css">
<!--
#div1{
background-color:#000000;
height:400px;
width:400px;
display:none;
}
-->
</style>
</head>
<body>
<input type="button" id="butn" value="顯示/隱藏" οnclick="toggle('div1')" />
<center>
<div id="div1"></div></center>
居中的DIV
</body>
</html>
=======================
3.javascript 控制 html元素 顯示/隱藏
1。編寫js函數
<script type="text/javascript">
?? function display(id){
?????? var traget=document.getElementById(id);
??????? if(traget.style.display=="none"){
??????????????? traget.style.display="";
??????? }else{
??????????????? traget.style.display="none";
????? }
?? }
</script>
2. 要顯示/隱藏的html元素加上 id 屬性
<table>
??? <tr id="menu" >???
?????? <td>控制這個tr的顯示/隱藏</td>
?? </tr>
</table>
3，添加按鈕，鏈接等觸發 js 函數
<input type="button" οnclick="display('menu')"?? value="顯示/隱藏"/>
<a href="#"?? οnclick="display('menu')"?? >顯示/隱藏</a>
javascript顯示隱藏層<div id="" style="display:none;">廣告</div>
<input type="botton" οnclick="函數">
<script language=javascript>
function 函數{
if(thisdiv.style.display=='none'){?
thisdiv.style.display=""
}
else
thisdiv.style.display="none"
}
</script>你先給div 取個ID=“AA”thisdiv=AA
javascript隱藏/顯示表單對象
javascript隱藏/顯示表單對象?
[SCRIPT language=JavaScript]
function expandIt(el) {
???? whichEl =document.getElementById(el)
???? if (whichEl.style.display ==?? 'none') {
????? whichEl.style.display?? = '';
???? }
???? else {
????? whichEl.style.display?? = 'none';
???? }
???? }
??
[/SCRIPT]
el是對象的id，不管是tr或者table等等先設置一下id，然后進行調用。
例：
[a οnclick="expandIt('ttchild'); return false" href="#" ]try it[/a]
[tr id="ttchild"][td width="18"]Example[/td][/tr]
使用時把[]變成<>
javascript控制頁面控件隱藏顯示的兩種方法
javascript控制頁面控件隱藏顯示的兩種方法，方法的不同之處在于控件隱藏后是否還在頁面上占位
方法一：
document.all["PanelSMS"].style.visibility="hidden";?
document.all["PanelSMS"].style.visibility="visible";
方法二：
document.all["PanelSMS"].style.display="none";?
document.all["PanelSMS"].style.display="inline";
方法一隱藏后 頁面的位置還被控件占用 只是不顯示 類似于.net驗證控件的Display=Static
方法二隱藏后 頁面的位置不被占用 類似于.net驗證控件的Display=Dynamic
?
?
?
?
====================
這個方法來我是從一個boblog模板上找到的，其實網絡上也可以搜索到；只是網絡上不看效果的轉載讓人難辯代碼的錯對和方便。用這個方法比用《給zblog再增3個功能：防刷、收縮側欄、復制加版權》的效果要好，純css隱藏div會刷新頁面，但用js就不會了。
js代碼如下，新建一個txt文件，復制進去，保存并修改文件后綴為js（例open.js）即可。我是把這個文件放在zblog的SCRIPT文件夾里，這里js比較多……
?程序代碼
function showhidediv(id){
?? try{
???? var sbtitle=document.getElementById(id);
???? if(sbtitle){
?????? if(sbtitle.style.display=='block'){
???????? sbtitle.style.display='none';
?????? }else{
???????? sbtitle.style.display='block';
?????? }
???? }
?? }catch(e){}
}
上面的代碼，其中sbtitle是模板里一個div的id，模板的范例可見下：
?程序代碼
<div id="sbtitle">
<div οnclick='showhidediv("toggle");'>最新日志</div>
<div id="toggle" style="display:none;">
最新日志內容
</div>
效果就是點擊“標題”，下面需要隱藏的部分就會在隱藏和顯示間切換。DISPLAY: none;為默認隱藏；如果想默認顯示就改為DISPLAY: block;。在zblog里，可在模板下，比如default.html，頂部加上<script language="JavaScript" src="<#ZC_BLOG_HOST#>script/open.js" type="text/javascript"></script>，側欄照上面修改即可。這樣的代碼，合適在任何網頁，而不僅是blog或zblog。
========================================================================================
js中radio的取值??
Radio 是 HTML 中的單選框，同一個 form 中，name 相同的 Radio 構成一組，這一組中最多只允許有一個 Radio 被選中。
如果將 form 提交到服務器端 ASP 程序，ASP 程序要獲得用戶選擇的那個 Radio 的 value 是非常方便的，用 request.Form("RadioName")，不必理會有幾個 Radio。
但在 JS(JavaScript) 中就要復雜多了，我們不能像對其它元素（如：文本框）一樣，使用 formid.objName.value 來取值，我們應該循環這個組的 Radio，判斷其 checked 屬性，再取值。
為了方便使用javascript獲取radio的值，我寫了一個通用的函數來實現：
function GetRadioValue(RadioName){
??? var obj;????
??? obj=document.getElementsByName(RadioName);
??? if(obj!=null){
??????? var i;
??????? for(i=0;i<obj.length;i++){
??????????? if(obj[i].checked){
??????????????? return obj[i].value;????????????
??????????? }
??????? }
??? }
??? return null;
}
比如，我們有一個name屬性為：“myradio”的單選控件組，要得到選中的值，只需這樣調用就可以了：
var RValue;
RValue=GetRadioValue("myradio");
如果沒有給出的radioname控件，則直接返回null，或者這一組控件沒有被選擇的項，則也返回null。
=====================================================================================
JS控制select的方法(摘取)??
JS控制select的方法(摘取)
2009年11月06日 星期五 10:31
?
| ? <html> <head> <script language="javascript"> <!-- 檢查某一項是否存在--> function check_option(t) { var obj = document.getElementById('select'); var len = obj.length; var exists = false; for(var i=0;i<len;i++) { if(obj.options[i].value==t) { exists = true; } } if (exists) { alert('exists'); } else { alert('not exists'); } } <!-- 增加一個select選項--> function add_option() { var obj = document.getElementById('select'); var len = obj.length; alert(len); obj.options.add(new Option('7aaaaaaaaaa','8')); } <!--刪除一個select選項--> function del_option(t) { var obj = document.getElementById('select'); var len = obj.length; for(var i=0;i<len;i++) { if(obj.options[i].value == t) { // 兼容ie和firefox obj.options.remove只支持ie obj.remove(i); break; } } ? } <!--選中一個選項--> function sel_option(t) { var obj = document.getElementById('select'); var len = obj.length; for(var i=0;i<len;i++) { if(obj.options[i].value == t) { obj.options[i].selected = true; break; } } } <!--修改某一項--> function edit_option(t) { var obj = document.getElementById('select'); var len = obj.length; for(var i=0;i<len;i++) { if(obj.options[i].value == t) { obj.options[i].text = 33333; break; } } } <!--清空--> function clear_option(){ var obj = document.getElementById('select'); obj.length = 0; } <!--獲得選中項的text--> function text_option(){ var obj = document.getElementById('select'); value = obj.options[obj.selectedIndex].text; alert(value); } </script> </head> <body> <select name="select" id="select"> <option value="1">1zzzzzzzzzzzzzz</option> <option value="2">2zzzzzzzzzzzzzz</option> <option value="3">3zzzzzzzzzzzzzz</option> </select> <br /> <input type="button" οnclick="check_option('2');" value="檢查"> <br /> <input type="button" οnclick="add_option();" value="增加"> <br /> <input type="button" οnclick="del_option('2');" value="刪除"> <br /> <input type="button" οnclick="sel_option('2');" value="選中"> <br /> <input type="button" οnclick="edit_option('2');" value="修改"> <br /> <input type="button" οnclick="clear_option();" value="清空"> <br /> <input type="button" οnclick="text_option();" value="取值"> </body> </html> |
?==================================================================================
js 控制表單中SELECT
清空select的項
Html代碼?
?
?
// document.all.objSelect.options.length = 0;
如果留下第一行的話就是
Html代碼?
?
?
// document.all.objSelect.options.length = 1;
判斷select選項中 是否存在Value="paraValue"的Item
Js代碼?
?
?
function jsSelectIsExitItem(objSelect,objItemValue){ var isExit = false; for(var i=0;i<objSelect.options.length;i++) { if(objSelect.options[i].value == objItemValue) { isExit = true; break; } } return isExit;}
向select選項中 加入一個Item
Js代碼?
?
?
function jsAddItemToSelect(objSelect,objItemText,objItemValue){ //判斷是否存在 if(jsSelectIsExitItem(objSelect,objItemValue)) { alert("該Item的Value值已經存在"); } else { var varItem = new Option(objItemText,objItemValue);// objSelect.options[objSelect.options.length] = varItem; objSelect.options.add(varItem); alert("成功加入"); } }
從select選項中 刪除一個Item
Js代碼?
?
?
function jsRemoveItemFromSelect(objSelect,objItemValue){ //判斷是否存在 if(jsSelectIsExitItem(objSelect,objItemValue)) { for(var i=0;i<objSelect.options.length;i++) { if(objSelect.options[i].value == objItemValue) { objSelect.options.remove(i); break; } } alert("成功刪除"); } else { alert("該select中 不存在該項"); } }
修改select選項中 value="paraValue"的text為"paraText"
Js代碼?
?
?
function jsUpdateItemToSelect(objSelect,objItemText,objItemValue){ //判斷是否存在 if(jsSelectIsExitItem(objSelect,objItemValue)) { for(var i=0;i<objSelect.options.length;i++) { if(objSelect.options[i].value == objItemValue) { objSelect.options[i].text = objItemText; break; } } alert("成功修改"); } else { alert("該select中 不存在該項"); } }??????
設置select中text="paraText"的第一個Item為選中
Js代碼?
?
?
function jsSelectItemByValue(objSelect,objItemText){ //判斷是否存在 var isExit = false; for(var i=0;i<objSelect.options.length;i++) { if(objSelect.options[i].text == objItemText) { objSelect.options[i].selected = true; isExit = true; break; } } //Show出結果 if(isExit) { alert("成功選中"); } else { alert("該select中 不存在該項"); } }
設置select中value="paraValue"的Item為選中
Js代碼?
?
?
//document.all.objSelect.value = objItemValue;
得到select的當前選中項的value
Js代碼?
?
?
//var currSelectValue = document.all.objSelect.value;
得到select的當前選中項的text
Js代碼?
?
?
//var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;
得到select的當前選中項的Index
Js代碼?
?
?
//var currSelectIndex = document.all.objSelect.selectedIndex;
完整例子
?
Html代碼?
?
?
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title>js控制select增刪改,選中,清空, 判斷控件是否存在</title><meta name="keywords" content="javascript select options text value add modify delete set"><meta name="description" content="javascript select options text value add modify delete set"><script language="javascript"><!--function watch_ini(){ // 初始for(var i=0; i<arguments.length; i++){ var oOption=new Option(arguments[i],arguments[i]); document.getElementById("MySelect")[i]=oOption;}}function watch_add(f){ // 增加 var oOption=new Option(f.word.value,f.word.value); f.keywords[f.keywords.length]=oOption;}function watch_sel(f){ // 編輯f.word.value = f.keywords[f.keywords.selectedIndex].text;}function watch_mod(f){ // 修改f.keywords[f.keywords.selectedIndex].text = f.word.value;}function watch_del(f){ // 刪除f.keywords.remove(f.keywords.selectedIndex);}function watch_set(f){ // 保存var set = "";for(var i=0; i<f.keywords.length; i++){set += f.keywords[i].text + ";";}confirm(set);}//--></script></head><body><form name="watch" method="post" action=""><select id="MySelect" name="keywords" size="10" οnchange="watch_sel(this.form)"></select><br><script language="javascript"><!--watch_ini("黑","色","頭","發","紫","色","頭","發"); // 初始關鍵詞//--></script><input type="text" name="word" /><br /><input type="button" value="增加" οnclick="watch_add(this.form);" /><input type="button" value="修改" οnclick="watch_mod(this.form);" /><input type="button" value="刪除" οnclick="watch_del(this.form);" /><input type="button" value="保存" οnclick="watch_set(this.form);" /></form></body></html>
總結
以上是生活随笔為你收集整理的JS控制DIV的显示隐藏 。js中radio的取值 。JS控制select的方法(摘取)。js 控制表单中SELECT的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自组网中继台_同频自组网基站
- 下一篇： Spring系列（二）：Bean注解用法