zoukankan      html  css  js  c++  java
  • jquery对css操作

    1.css
    取得p的颜色:
    $(document).ready(function(){
    var p= $("p").css("color");
    alert(p);
    });
    设置段落字体的颜色为红色:
    $(document).ready(function(){
    $("p").css("color","red");
    });
    设置段落字体的颜色为红色并且背景色为蓝色:
    $(document).ready(function(){
    $("p").css({color:"red",background:"blue"});
    });

    <body>
    <div>test1</div>
    <div id="d" >test2</div>
    <input type="text" value="文本框" />
    <input type="submit" />
    <p>p</p>
    </body>

    2.位置
    offset() 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
    获取p2段落的位置:
    $(document).ready(function(){
    var p=$("p:last");
    p.html( "left: " + p.offset().left + ", top: " + p.offset().top );
    });
    设置p2段落的位置:
    $(document).ready(function(){
    $("p:last").offset({top:150,left:20});
    });

    position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。
    获取第一段相对第二段的位置偏移:
    $(document).ready(function(){
    var p=$("p:first");
    $("p:last").html("left:"+p.position().left+",top:"+p.position().top);
    });
    scrollTop()获取匹配元素相对滚动条顶部的偏移
    获取第一段相对滚动条顶部的偏移
    $(document).ready(function(){
    var p=$("p:first");
    $("p:last").text("scrollTop:"+p.scrollTop());
    });
    scrollLeft() 获取匹配元素相对滚动条左侧的偏移。

    <body>
    <div>test1</div>
    <div id="d" >test2</div>
    <input type="text" value="文本框" />
    <p>p1</p>
    <p>p2</p>
    </body>

    3.尺寸

    height()获取、设置元素高度,width()获取、设置元素的宽度
    $(document).ready(function(){
    $("p:last").text( "p2高度为:"+$("p:last").height());
    });
    设置p2的高度:
    $(document).ready(function(){
    $("p:last").height(30);
    });

    innerHeight()元素内部区域高度(包括补白、不包括边框)。innerWidth()元素内部区域宽度(包括补白、不包括边框)。
    $(document).ready(function(){
    var p = $("p:first");
    $("p:last").text( "innerHeight:" + p.innerHeight() );
    });
    outerHeight()获取匹配元素外部高度(默认包括补白和边框)。outerWidth()获取匹配元素外部宽度(默认包括补白和边框)。
    $(document).ready(function(){
    var p = $("p:first");
    $("p:last").text( "outerWidth:" + p.outerWidth() );
    });

  • 相关阅读:
    [core java学习笔记][第五章继承]
    [core java学习笔记][第四章对象与类]
    【转载】Maven中的BOM概念
    【转载】关于docker某些有用的文章
    【转载】linux Jumpserver跳板机堡垒机部署安装使用教程
    四:(之五)Dockerfile语法梳理和实践
    四:FAQ附录(容器交互,镜像交互,镜像导出)
    四:(之四)基于已有镜像构建自己的Docker镜像
    四:(之三)制作镜像和一些docker命令
    四:(之一和之二) docker架构和底层技术分析(C/S架构)
  • 原文地址:https://www.cnblogs.com/qinyi173/p/4951417.html
Copyright © 2011-2022 走看看