jquery之css操作

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--HTML区域-->
    <h1>第一个标题</h1>
    <img src="57eb.jpg">
    <div class="nav-2014">
        <div class="w">
            <div class="w-spacer"></div>
            <div class="categorys">
                <div class="dt" style="color: red;font-size: 25px">家用电器分类</div>
                <div class="dp" style="color: green;font-size: 12px;">家用电器价格</div>
                <img src="rB3.jpg">
            </div>
            <span class="hr">11</span>
            <div class="navitems-2014 chr1 chr2">
                <div id="treasure"></div>
                <span class="clr clr1"></span>
                <span class="chr"></span>
                男：<input type="checkbox" value="nan">
                女:<input type="checkbox"  value="nv">
                <input type="text" value="2">
                <input type="text" value="3">
            </div>
            <ul>
                <li>第一行</li>
                <li>第二行</li>
                <li>第三行</li>
                <li>第四行</li>
            </ul>
        </div>
    </div>
    <h2>第二个标题</h2>
    <p style="width: 200px">第一段</p>
    <p>第二段</p>
</body>
</html>

css(name,|k,v|pro|fn) 访问匹配元素的样式属性

　　name:要访问的样式属性名

　　k,v ：以键值参数的方式修改要访问样式的属性名/值

　　pro: 以传入多个键值对的方式修改要访问样式的属性名/值

    <script src="jquery-3.1.0.js"></script>
    <script>
//        取到div元素,css样式中color属性
        $("div").css("color")
//        修改所有匹配元素css样式中color为red
        $("p").css("color",'red')
//        修改所有匹配元素css样式中color为red，同时设置多个属性
        $("p").css({"color":"white","background-color":'black'})
    </script>

　　offset([coordinates]) 获取修改匹配元素在当前视口的相对偏移

　　返回的对象包含两个以像素计的属性坐标：top,left

    <script src="jquery-3.1.0.js"></script>
    <script>
//        获取最后一个p元素
        var p = $("p:last")
//        获取p元素的top,left坐标
        var offset = p.offset()
//        修改p元素的html内容
        p.html("left: "+ offset.left + ",top:"+offset.top)
//        修改最后一个p元素的坐标位置
        $("p:last").offset({top:10,left:30})
    </script>

　　scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移

　　　　$(window).scrollTop()   # 当前窗口滚动条滚动的高度

　　　　$("#nid").scrollTop()   # 窗口中有窗口时，对应的nid小窗口的滚动高度

    <script src="jquery-3.1.0.js"></script>
    <script>
//        取得最后一个p元素相对滚动条顶部的偏移
        var p = $("p:first");
        $("p:last").text("ScrollTop:"+ p.scrollTop())
    </script>

　　height([val|fn]) 获得匹配元素当前计算的高度值px

　　　　$(window).height()   # 窗口的高度

　　　　$(document).height()  # 文档的高度

　　　　$("nid").height()  # 某标签的高度

　　width([val|fn]) 获得第一个匹配元素当前计算的宽度值px

　　innerHeight() 获得第一个匹配元素的内部区域高度（包括补白，但不包括边框）

　　innerWidth() 获得第一个匹配元素内部区域宽度（包括补白，但不包括边框）

　　outerHeight() 获取第一个匹配元素外部区域高度（包括补白和边框）

　　outerWidth() 获取第一个匹配元素外部区域宽度（包括补白和边框）

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

        $("p:last").height()
        $("p").width()
    </script>

　　

posted on 2016-12-19 15:18  孔扎根  阅读(143)  评论(0)    收藏  举报

导航