Question

html中input默认为无边框，通过js显示边框

html中的input默认的边框设置是style="border:0px;"，是不显示边框，当触发onclick事件时，把光标放到最后，并显示边框。我这样写：
<input type="text" name="pro' + n.id + '" id="pro' + n.id + '" value="' + n.project + '" onclick="doEdit(this.id)" style="border:0px;" size="' + n.project.length + '" onblur="outfocus(this.id)"/>
function doEdit(id)
{
document.getElementById(id).style.border="15px";
}
可是边框还是不显示。

Answer 1

function doEdit(id)
{
document.getElementById(id).className="bd";
}
<style>
.bd{border:15px solid #000}
</style>
js中涉及样式尽量使用className，因为定义的样式可以增加其他想改变的样式，比如background等等；

Answer 2

html:

<input type="text" class="input" value="input-border">
<button class="button">input-btn</button>
css:
input{
border:0;
}
js:
$(".button").click(function () {
$('.input').css('border','1px solid #e5e5e5')
});

Answer 3

<input id="a" />
<script>
document.getElementById('a').style.border='solid 1px red';
</script>
另一种是使用css
<style type="text/css">
input.hasborder{
border:'solid 1px #333';

}

<style>
<script>
document.getElementById("a").className = "hasborder";

</script>

Answer 4

<style type="text/css">
#text_1{border:0px;}
</style>
<script type="text/javascript">
function over_text(obj)
{
document.getElementById(obj).style.border="1px solid #DDD";
}
</script>

<input type="text" name="text_1" id="text_1" onclick="over_text(this.id)" />

试一下

Answer 5

你还不如使用:hover属性来实现这个功能