JS把input边框颜色改变之后怎么恢复原来的颜色？

设计手 2020-03-09 06:45:26



<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<style type="text/css">

input{height:28px;line-height:28px;border:1px solid green;}

</style>

<script type="text/javascript">

function discolorStr(box)

{      

	  document.getElementById(box).style.border ="1px solid red";

}



function discolorRes(box)

{      

	  document.getElementById(box).style.border ="";

}

</script>



<body>

<div align="center" style="height:300px;line-height:300px;">



<input name="txta" id="txta" size="20" maxlength="20">

<input type="button" onClick="discolorStr('txta')" value="输入框变色">

<input type="button" onClick="discolorRes('txta')" value="恢复本色">

</div>

</body>

</html>

因为输入框ID没有单独指定className 没法获取到cssText，把输入框边框变红色之后怎么恢复过来呢？
本来document.getElementById(box).style.border ="1px solid green"; 这样最方便
但是实际上有可能边框不是green 能不能用JS直接恢复到原来的颜色属性？

...全文

610 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2020-03-09

打赏
举报

var str = "";
function discolorStr(box)
{
	var obj = document.getElementById(box);
	if (str == "")
		str = (obj.currentStyle||getComputedStyle(obj,null)).borderColor;
	obj.style.borderColor ="red";
}

function discolorRes(box)
{      
	var obj = document.getElementById(box);
	obj.style.borderColor = str;
}

天际的海浪 2020-03-09

打赏
举报

引用 4 楼设计手的回复:

[quote=引用 1 楼天际的海浪的回复:] 你 document.getElementById(box).style.border =""; 就可以啊

这个办法只是勉强，兼容性也不行[/quote] 这个兼容性没问题的，或者设置之前获取下css的值


var str = "";
function discolorStr(box)
{
	var obj = document.getElementById(box);
	if (str)
		str = (obj.currentStyle||getComputedStyle(obj,null)).borderColor;
	obj.style.borderColor ="red";
}

function discolorRes(box)
{      
	var obj = document.getElementById(box);
	obj.style.borderColor = str;
}

设计手 2020-03-09