<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function(){
//当修改input的style的属性的时候在ie6 ie7 ie8存在兼容性的问题
//当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,
//其type属性在ie下就成了只读属性了,不可以修改。在ff下仍是可读写属性。
var olnp = document.getElementById('input');
olnp.onclick = function(){
olnp.type = 'checkbox';
}
}
</script>
</head>
<body>
<input id="input" type="button" />
</body>
</html>
解决方案二:用visibility:hidden;实现隐藏 但是元素的位置被占用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function(){
var olnp1 = document.getElementById('input1');
var olnp2 = document.getElementById('input2');
olnp1.onclick = function(){
olnp2.style.visibility = 'visible';
olnp1.style.visibility = 'hidden';
}
olnp2.onclick = function(){
olnp1.style.visibility = 'visible';
olnp2.style.visibility = 'hidden';
}
}
</script>
<style>
.visF{}
</style>
</head>
<body>
<input id="input1" type="button" style="visibility:visible;" value="这是个按钮" />
<input id="input2" type="text" style="visibility:hidden;" value="这是个文本框" />
</body>
</html>
解决方案三:用display:none实现隐藏 元素的位置不被占用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="get">
<input id="tx" type="text" value="密码" style="display: block;" οnfοcus="onf();">
<input id="pw" type="password" name="password" style="display: none;">
<input type="button" id="btn" value="显示密码" οnclick="onc();" />
</form>
<script>
var otx = document.getElementById('tx');
var opw = document.getElementById('pw');
var obtn = document.getElementById('btn');
var countotx = 0;
function txToPw(){
otx.style.display = 'none';
opw.style.display = 'block';
if(otx.value == '密码') otx.value = '';
opw.value = otx.value;
}
function pwToTx(){
otx.style.display = 'block';
opw.style.display = 'none';
otx.value = opw.value;
}
var count = 0;
function onf(){
if(count == 0) txToPw();
count = 1;
}
var countbtn = 0;
function onc(){
if(countbtn === 0){
pwToTx();
countbtn = 1;
obtn.value = '隐藏密码';
}
else{
txToPw();
countbtn = 0;
obtn.value = '显示密码';
}
}
</script>
</body>
</html>