jquery text html width heigth的用法

时间：2024-10-20 15:37:32
<body>

  <div id="div1">

    <h3>我是标题</h3>

  </div>

  <div id="div2">

    <p>我是p标签</p>

    script src="jquery-1.12.4.js"></script>

    <script>

      $(function () {

        //html:相当于innerHTML  text:相当于innerText

        //获取

        console.log($("div").html()); //<h3>我是标题</h3>

        console.log($("p").text()); //我是p标签

        //设置

        $("div h3").html("<p>我是文本</p>");

        $("p").text("我是文本");

      });

    </script>

</body>
<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    div {

      width: 200px;

      height: 200px;

      background-color: red;

      padding: 10px;

      border: 10px solid #000;

      margin: 10px;

    }

  </style>

</head>

<body>

  <div></div>

  <script src="jquery-1.12.4.js"></script>

  <script>

    $(function () {

      //width与height的用法一样

      //获取div的宽度

      console.log($("div").css("width"));

      //设置div的width

      $("div").css("width", "400px");

      $("div").css("height", "400px");

      //直接获取到的是数字

      //就是获取的width的值

      console.log($("div").width()); //width

      console.log($("div").innerWidth()); //padding + width

      console.log($("div").outerWidth()); //padding + width + border

      console.log($("div").outerWidth(true)); //padding + width + border + margin

    });

  </script>

</body>

</html>

相关文章