jQuery之屬性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery屬性</title>
    <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
    <style type="text/css">
    div{width: 100px;height: 100px;background: #ccc;margin: 10px;padding: 10px;border: 10px solid black}
    </style>

    <!-- 
    常用的方法:
    addClass():添加class;
    removeClass():刪除class
    width():獲取(內容)寬的大小,沒有單位
    innerWidth():width+padding的大小
    outerWidth(): width+padding+border的大小
    outerWidth(true): width+padding+border+margin的大小

    相同作用的還有width和height,此處關於height的屬性方法省略
     -->

    <script type="text/javascript">
    $(function(){
        $('div').addClass('box3 box4');//可以通過f12查看
        $('div').removeClass('box2');
    })
    </script>


    <script type="text/javascript">
    $(function(){
        alert($('div').width());//100
        alert($('div').innerWidth());//120
        alert($('div').outerWidth());//140
        alert($('div').outerWidth(true));//160
    })
    </script>
</head>
<body>
    <div class="box1 box2">div</div>
</body>
</html>
發佈了30 篇原創文章 · 獲贊 0 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章