Javascript动态改变按钮样式
来源:互联网 发布:mac os x sierraDMG 编辑:程序博客网 时间:2024/05/18 00:37
主要用到button的onmouseover, onmouseout ,onclick事件,鼠标移到按钮上,按钮的透明度发生改变,移出按钮透明度恢复。点击按钮,被点击按钮背景色改变,点击下一按钮该按钮背景色改变,上一按钮背景色恢复。效果如上图,代码如下。详细介绍见代码注释:
将下列代码放置于head区域:
<script language=javascript>
var preButtonID="null"; //变量用来储存上一被点按钮的ID,并定义初始值为null
function buttonMouseOver(buttonID){
document.getElementById(buttonID).filters.alpha.opacity=60;
//鼠标移上时改变相应ID按钮的透明度
}
function buttonMouseOut(buttonID){
document.getElementById(buttonID).filters.alpha.opacity=100;
//鼠标移出时改变相应ID按钮的透明度
}
function buttonMouseClick(buttonID){
if (preButtonID!="null"){//如果上一按钮的ID不为初值null,则把上一按扭的背景色恢复
document.getElementById(preButtonID).style.backgroundColor="#CCCCCC";
}
document.getElementById(buttonID).style.backgroundColor="#FF0000";
//改变被点击按钮的背景色
preButtonID=buttonID;//把被点击按钮的ID赋给“上一按钮”变量
}
</script>
<style type="text/css" >
.myInput{
filter:alpha(opacity=100); /*此句不能删除,如果没有,JS中无法控制按钮的透明度*/
border:0px;
background-color:#CCCCCC;
font-family: sans-serif, Arial, Helvetica;
}
</style>
以下代码放在body区域:
<input type=button value=BUTTON1 name=button1 id=button1 class=myInput onclick="buttonMouseClick(this.id)" onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON2 name=button2 id=button2 class=myInput onclick="buttonMouseClick(this.id)" onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON3 name=button3 id=button3 class=myInput onclick="buttonMouseClick(this.id)" onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON4 name=button4 id=button4 class=myInput onclick="buttonMouseClick(this.id)" onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
<input type=button value=BUTTON5 name=button5 id=button5 class=myInput onclick="buttonMouseClick(this.id)" onmouseover="buttonMouseOver(this.id)" onmouseout="buttonMouseOut(this.id)">
自己可以手动设置透明度和点击后的背景颜色,是一种不错的效果.
- Javascript动态改变按钮样式
- 【javascript】动态改变样式
- 用javascript动态改变样式
- javascript动态改变div样式
- javascript动态改变style里的样式
- Javascript动态改变样式表性能测试。
- 通过javascript动态改变按钮的值
- 使用javascript动态改变当前行的显示样式
- CSS动态改变样式
- 动态改变CSS样式
- 动态改变css样式
- Jquery动态改变样式
- stylus动态改变样式
- 动态改变 CBA 按钮
- 动态改变 CBA 按钮
- 动态改变 CBA 按钮
- javascript改变样式
- javascript改变样式
- 我的英文名
- 童话生死恋
- 惠普网络服务器集群技术及MSCS安装使用手册
- C#高级编程(第3版)23.8.1 将ADO.NET数据转换为XML文档(2)
- 改变人生的32句励志名言
- Javascript动态改变按钮样式
- Eclipse快捷键指南
- 企业级EJB开发实例
- Java操作Word,Excel,Access,Pdf
- jsp实现文件的上载
- RMI一步一步来
- 本人声名
- UTI进入产业化试点,与PCMCIA竞争加剧
- 建立一个学习的空间