关于input style属性兼容性问题

最新推荐文章于 2022-07-29 10:43:26 发布

茂树24

最新推荐文章于 2022-07-29 10:43:26 发布

阅读量4.6k

点赞数

分类专栏： CSS2.1

本文链接：https://blog.csdn.net/wmaoshu/article/details/51470117

版权

CSS2.1 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>

茂树24

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于input style属性兼容性问题

<!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
复制链接

扫一扫