如何点击后改变按钮边框颜色

如何点击后改变按钮边框颜色,第1张

$(function ($){
$("#physical")hover(function (){
$("#physical")css({"background-color":"orange","color":"white"});
},function(){
$("#physical")css({"background-color":"white","color":"orange"});
})
})
只是想单击改变颜色不考虑变回来就
$("#physical")click(function (){
$("#physical")css({"background-color":"orange","color":"white"});
}

首先给这个按钮添加鼠标的按下和松开的事件,mousedown,mouseup,使用这两个函数即可。我举个例子
按钮对象mousedown(function(){
//这里写更改颜色代码
});//这个是鼠标键,是你鼠标左击按下的的效果
按钮对象mouseup(function(){
//这里写更改颜色的代码
})//这个是鼠标键,是你鼠标左击放开后的效果
}
上面的写法是基于jquery的用法
其实也可以考虑一下使用原生的js,但是要考虑的是兼容性问题,我给你提供几样数据
IE
左键是 windoweventbutton = 1
右键是 windoweventbutton = 2
中键是 windoweventbutton = 4
没有按键动作windoweventbutton = 0
Firefox
左键是 eventbutton = 0
右键是 eventbutton = 2
中键是 eventbutton = 1
没有按键动作 eventbutton = 0
Opera 723/754
鼠标左键是 windoweventbutton = 1
没有按键动作 windoweventbutton = 1
右键和中键无法获取
Opera 760/80
鼠标左键是 windoweventbutton = 0
没有按键动作 windoweventbutton = 0
右键和中键无法获取
另外:屏蔽右键的是windoweventbutton = 3

1、html代码:

<button onclick='demo()'>click me!</button>

2、js代码:

var index=0;
function demo(){
  var colorArr=['red','yellow','blue'];
  eventtargetstylebackgroundColor = colorArr[index%3];
  index+=1;
}

做一个有2个关键帧的影片剪辑。
第一帧的内容就是这个按钮,在帧上写
stop();
第二帧的内容就是这个按钮被按下状态,但它不是按钮而是个图形。你可以从按钮的第三帧里把这图形复制出来。
2个帧内容的坐标要完全重叠才行。
当这个影片剪辑被点击之后,就跳到第2帧去,定格在按钮的按下状态。

调色板类QPallete提供了颜色角色(color roles)概念,是指当前GUI界面中颜色的职责,通过枚举变量QPalette::ColorRole来定义,比较常用的颜色角色有:
QPalete::Window,通常指窗口部件的背景色;
QPalette:WindowText,通常指窗口不见的前景色;
QPalette::Base,指文本输入窗口部件(比如QtextEdit,QLinedit等)的背景色
QPalette::Text,与QPalette::Base一块使用,指文本输入窗口部件的前景色;
QPalette::Button,指按钮窗口部件的背景色;
QPalette::ButtonText,指按钮窗口部件的前景色

例:
QPalette pal = pushButtonCancel->palette();
palsetColor(QColorGroup::ButtonText,QColor(255,0,0));
pushButtonCancel->setPalette(pal);
按钮pushButton的字体颜色为红色

<body id=body style="background-color:#888">
<div id=text style="background-color:#8f8">请留意看页面的背景颜色和这段文字的背景颜色</div>
<button onclick="bodystylebackgroundColor='#000';">点我改变页面背景颜色</button>
<button onclick="textstylebackgroundColor='#f88';">点我改变文字背景颜色</button>
</body>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13374351.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-24
下一篇 2023-07-24

发表评论

登录后才能评论

评论列表(0条)

保存