jQuery详细教程一介绍了jquery的简介,安装,语法,选择器,事件;JQuery详细教程二简单介绍了JQuery的效果,比如淡入,淡出,尤其感兴趣的是动画,还有经典的回调函数,JQuery详细教程三介绍了如何通过text(),html(),append(),prepend()去添加或者获取数据,以及如何删除数据,更多文章 请关注博客: http://blog.csdn.NET/qq_37022150
老司机开车,你准备好了嘛,上路
这篇博客主要介绍CSS() 与 JQuery获取尺寸的方式
CSS类
jQuery可以很容易地对 CSS 元素进行操作,主要有4个方法:
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
调用方法前,加点料,做个样式表
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
addClass() 可以添加一个类 或者多个类,以多个类为例
$("button").click(function(){
$("#div1").addClass("important blue");
});
removeClass() 移除指定的方法
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
toggleClass() 这个很方便,直接进行切换
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() 方法
技能一: 获取返回css属性
$("p").css("background-color");
技能二: 设置css属性
$("p").css("background-color","yellow");
技能三: 设置多个css属性
$("p").css({"background-color":"yellow","font-size":"200%"});
JQuery尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
技能一:jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
技能二:jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
技能三:jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
技能三:jQuery outerWidth() 和 outerHeight() 方法
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
$("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });
非常了不得的技能:
$("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });
<div>宽度和高度也可以调
$("button").click(function(){ $("#div1").width(500).height(500); });
总结一句话,JQuery 对于 document文档,windows窗口,div块元素等 的宽度与高度都可以调整
更多文章,请关注: http://blog.csdn.NET/qq_37022150?viewmode=list