举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > jquery尺寸定义一个变量 jQuery 尺寸

jquery尺寸定义一个变量 jQuery 尺寸

2023-03-13 20:31 jQuery教程

jquery尺寸定义一个变量 jQuery 尺寸

jquery尺寸定义一个变量

jQuery尺寸定义是一种用于指定元素的大小的方法,它可以用来设置元素的宽度、高度、内边距和外边距。jQuery尺寸定义可以使用CSS样式表中的属性来指定,也可以使用JavaScript代码来指定。

// 使用CSS样式表中的属性来指定元素的大小
$("#myElement").css({
    width: "200px",
    height: "100px",
    padding: "10px",
    margin: "20px"
}); 
// 使用JavaScript代码来指定元素的大小 
$("#myElement").width(200);  // 设置元素的宽度为200px 
$("#myElement").height(100); // 设置元素的高度为100px 
$("#myElement").css("padding", "10px"); // 设置元素的内边距为10px 
$("#myElement").css("margin", "20px"); // 设置元素的外边距为20px   

jQuery 尺寸

通过 jQuery,很容易处理元素和浏览器窗口的尺寸。


jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery 尺寸

jQuery Dimensions


jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

下面的例子返回指定的 <div> 元素的宽度和高度:

实例

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});



jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

下面的例子返回指定的 <div> 元素的 inner-width/height:

实例

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});



jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

下面的例子返回指定的 <div> 元素的 outer-width/height:

实例

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

尝试一下

提示:outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距);outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。


阅读全文
以上是鳄鱼CMS为你收集整理的jquery尺寸定义一个变量 jQuery 尺寸全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们