jQuery toggle()设置CSS样式
作者:bea
toggle() 切换元素的可见状态。 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 --------------------------------- 示例 切换所有段落的可见状态。 HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle="display:
toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
---------------------------------
示例
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
$("p").toggle()
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
设置背景图片,以突出透明度的效果
代码如下:
<head>
<title>toggle()</title>
<style type="text/css">
<!--
body{
background:url(bg.jpg);
margin:20px; padding:0px;
}
img{
border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").toggle(
function(oEvent){
$(oEvent.target).css("opacity","0.5");
},
function(oEvent){
$(oEvent.target).css("opacity","1.0");
}
);
});
</script>
</head>
<body>
<img src="test.jpg">
</body>
有用 | 无用
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
---------------------------------
示例
切换所有段落的可见状态。
HTML 代码:
<p>Hello</p><p style="display: none">Hello Again</p>
jQuery 代码:
$("p").toggle()
结果:
<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>
设置背景图片,以突出透明度的效果
代码如下:
<head>
<title>toggle()</title>
<style type="text/css">
<!--
body{
background:url(bg.jpg);
margin:20px; padding:0px;
}
img{
border:1px solid #FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("img").toggle(
function(oEvent){
$(oEvent.target).css("opacity","0.5");
},
function(oEvent){
$(oEvent.target).css("opacity","1.0");
}
);
});
</script>
</head>
<body>
<img src="test.jpg">
</body>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Javascript select下拉框操作常用方法
- 页面中js执行顺序
- js 鼠标拖动对象 可让任何div实现拖动效果
- Jquery作者John Resig自己封装的javascript 常用函数
- JQuery 图片延迟加载并等比缩放插件
- javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
- CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
- 让Firefox支持event对象实现代码
- extjs DataReader、JsonReader、XmlReader的构造方法
- fileupload控件 文件类型客户端验证实现代码
- JavaScript 变量基础知识
- 表格 隔行换色升级版
- csdn 论坛技术区平均给分功能
- js 操作table之 移动TR位置 兼容FF 跟 IE
- 按键盘方向键翻页跳转的javascript代码(支持ie,firefox)
- 在js中单选框和复选框获取值的方式
- javascript 常见的闭包问题的解决办法
- 模仿JQuery sortable效果 代码有错但值得看看
- javaScript parseInt字符转化为数字函数使用小结