国产视频appjs插件jquery可以很方便的對HTML的元素進行操作,比如一些元素的顯示與隱藏,一些元素的動態效果等,今天就說一說通過jquery獲取DIV元素的CSS屬性,以及設置DIV元素的CSS屬性的方法。

jquery獲取DIV元素的CSS屬性值

国产视频appjq獲取DIV元素的屬性值,可以使用css()方法

例:利用jquery獲取DIV元素的寬

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        #mochu{
            margin: 10px;
            padding: 10px;
            color: red;
            height: 30px;
            width: 40px;
        }
    </style>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div id="mochu">飛鳥慕魚博客<br/>http://xswdd.cn</div>
    <script>
        var h = $('#mochu').css('width');
        console.log(h);
    </script>
</body>
</html>

打印結果:

40px

例:利用jquery獲取DIV元素的高

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div id="mochu">飛鳥慕魚博客<br/>http://xswdd.cn</div>
    <script>
        var h = $('#mochu').css('height');
        console.log(h);
    </script>
</body>
</html>

打印結果:

42px

注意:

国产视频app1、如果給DIV元素定義了CSS屬性的值,則直接輸出定義的CSS值

国产视频app2、如果未定義DIV元素的CSS屬性值,則輸出瀏覽器渲染后DIV的默認值

利用jquery設置DIV元素的值

国产视频app在JQ中可以通過CSS方法獲取DIV元素的CSS屬性值,也可以設置或改變元素的CSS屬性值

例:利用jq改變字體的顏色

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div id="mochu">飛鳥慕魚博客<br/>http://xswdd.cn</div>
    <script>
        $('#mochu').css('color','red');
    </script>
</body>
</html>

結果如圖:

JQuery獲取與設置元素CSS屬性

注:改變DIV中字體的顏色其實就是給這個DIV加入了一個 color 的CSS屬性,并把屬性值設置成 red(紅色)

国产视频app在瀏覽器中查看元素就可以發現加入的CSS屬性

JQuery獲取與設置元素CSS屬性

例:給DIV元素加入多個CSS屬性

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
    <div id="mochu">飛鳥慕魚博客<br/>http://xswdd.cn</div>
    <script>
        $('#mochu').css({'color':'red','heigth':'40px','width':'40px'});
    </script>
</body>
</html>

在瀏覽器中審核元素,如下圖

JQuery獲取與設置元素CSS屬性

国产视频app可以發現,對過JQ設置的CSS屬性都寫到了DIV上

国产视频app注意:利用JQ的CSS()方法設置或添加多個CSS屬性的時候,要以{'':'','':''}這種數據格式寫入。