JQuery详细教程三之HTML(css() 与尺寸)

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.youkuaiyun.com/qq_37022150?viewmode=list