JS调用CSS样式表问题(功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』)
JS调用CSS样式表问题(功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』)
补充:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题文档</title>
<script type="text/javascript">
function dod(){
document.getElementById("testId").className="testClass"}
</script>
<style type="text/css">
.testClass{ border:5px solid #000;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div >
<input name="" type="text" onmouseover="dod"/>
</div>
<div id="testId">
abc
</div>
</body>
</html>
追问:这样还要定义javascript呀! 没看见有捱。你用这个实现了“鼠标经过文本域是文本域边框颜色发生变化”?a:hover可以实现,不过在IE8.0下出现了兼容性问题,郁闷呀!那你能够解决这个问题不? 能解决请写出源码
答案:用CSS:
input:hover {border: 5px solid #000;}
用Javascript:
<input name="" type="text" onmouseover="this.style.border = '5px solid #000';" onmouseout="this.removeAttribute('style');" />
其他:<input type="text" size="10" id="text1" onmouseover="javascript:textover('tover');" />
<style type="text/css">
#text1{
background:#fff;
border:solid 1px #ccc;
}
.tover{
background:#fff;
border:solid 1px #f00;
}
</style>
<script language="javascript">
function textover(cname){
var m
m=document.getElementById("text1")
m.classname=cname
}
</script> <input type="text" size="10" id="text1" class="text1" onmouseover="javascript:textover('tover');" />
<style type="text/css">
.text1{
background:#fff;
border:solid 1px #ccc;
}
.tover{
background:#fff;
border:solid 1px #f00;
}
</style>
楼上的这么改下就行了。要注意CSS的优先权 建议你用jquery,,实现你的要求很简单的。。。
上一个:JS中如何判断用户离开了当前界面,跳转到了另一个界面?
下一个:js模拟横向滚动条 内容不能随着滚动条拖动