zoukankan      html  css  js  c++  java
  • js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法)

    一、总结

    一句话总结:jquery里面多是方法啊,比如jquery对象的宽高。所以取值是方法,赋值就是方法里面带参数。

    1、百度富文本编辑器ueditor如何设置宽高?

    jquery对象的width()和height()方法

    37             $('#btn2').click(function(){
    38                 $("#div1").width(50)
    39                 $('#div1').height(50)
    40             })

    2、juqery对象的宽高对应的三个方法是什么,分别表示什么意思?

    元素的宽度高度

    1. width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
    2. innerWidth() 方法返回元素的宽度(包括内边距)
    3. outerWidth() 方法返回元素的宽度(包括内边距和边框)
    4. height()、innerHeight()、outerHeight()与宽度类似

    3、juqery对象如何设置一个表示全副武装的宽度(包括相关的一切)?

    outerWidth()方法加true参数

    34             //outerWidth()    width + padding + border+margin
    35                 alert($("#div1").outerWidth(true))

    4、juqery对象的innerWidth()方法包括的是哪个边距?

    内边距  padding

    5、jquery的匿名函数中的index参数表示什么意思?

    因为jquery对象多是集合,所以index就是表示所选元素的下标

    43                 $("#main div").width(function(index,oldWidth){
    44                     //alert(index)
    45                     return oldWidth*(index+1)/5
    46                 })

    二、jquery如何获取和设置元素的宽高

    1、相关知识

    元素的宽度高度

    1. width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
    2. innerWidth() 方法返回元素的宽度(包括内边距)
    3. outerWidth() 方法返回元素的宽度(包括内边距和边框)
    4. height()、innerHeight()、outerHeight()与宽度类似

    2、代码

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <style>
     4 </style>
     5 <head>
     6     <meta charset="UTF-8">
     7     <title>演示文档</title>
     8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
     9     <style>
    10         #main{
    11             background: #ccc;padding: 10px;float: left;
    12         }
    13         #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}
    14     </style>
    15 </style>
    16 </head>
    17 <body>
    18     <div id="main">
    19         <div id="div1"></div>
    20         <div id="div2"></div>
    21         <div id="div3"></div>
    22     </div>
    23     <input id="btn1" type="button" value="获取">
    24     <input id="btn2" type="button" value="设置">    
    25     <input id="btn3" type="button" value="设置2">
    26     <script type="text/javascript">
    27         $(function(){
    28             $('#btn1').click(function(){
    29                 alert($("#div1").width())
    30                 //width + padding
    31                 alert($("#div1").innerWidth())
    32                 //outerWidth()    width + padding + border
    33                 alert($("#div1").outerWidth())
    34             //outerWidth()    width + padding + border+margin
    35                 alert($("#div1").outerWidth(true))
    36             })
    37             $('#btn2').click(function(){
    38                 $("#div1").width(50)
    39                 $('#div1').height(50)
    40             })
    41             
    42             $('#btn3').click(function(){
    43                 $("#main div").width(function(index,oldWidth){
    44                     //alert(index)
    45                     return oldWidth*(index+1)/5
    46                 })
    47             })
    48         })
    49     </script>
    50 </body>
    51 </html>
     
  • 相关阅读:
    MVP模式与MVVM模式
    webpack的配置处理
    leetcode 287 Find the Duplicate Number
    leetcode 152 Maximum Product Subarray
    leetcode 76 Minimum Window Substring
    感知器算法初探
    leetcode 179 Largest Number
    leetcode 33 Search in Rotated Sorted Array
    leetcode 334 Increasing Triplet Subsequence
    朴素贝叶斯分类器初探
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9202160.html
Copyright © 2011-2022 走看看