zoukankan      html  css  js  c++  java
  • jQuery的CSS与位置

    jQuery的CSS与位置

    一、设置css样式/读取css值

    • css()
    <p style="color: blue;">月亮的后裔</p>
    <p style="color: green;">太阳的后裔</p>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    // 1、得到第一个p标签的颜色
    console.log($('p:first').css('color'))
    // 2、设置所有p标签的文本颜色为red
    $('p').css('color', 'red')
    // 3、设置第二个p的字体颜色(#ff0011),背景(blue),宽(300px),高(30px)
    $('p:eq(1)').css({
        color: '#ff0011',
        background: 'blue',
         300,
        height: 30,
    })
    </script>
    

    二、获取/设置标签的位置数据

    • offset():相对页面左上角的坐标
    • position():相对父元素左上角的坐标
    <style type="text/css">
        * {
            margin: 0;
        }
        .div1 {
            position: absolute;
             200px;
            height: 200px;
            top: 20px;
            left:10px;
            background: blue;
        }
        .div2 {
            position: absolute;
             100px;
            height: 100px;
            top: 50px;
            background: red;
        }
        .div3 {
            position: absolute;
            top: 250px;
        }
    </style>
    <div class="div1">
        <div class="div2">测试offset</div>
    </div>
    <div class="div3">
        <button id="btn1">读取offset和position</button>
        <button id="btn2">设置offset</button>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    $('#btn1').click(function () {
        // 打印div1相对于页面左上角的位置
        var offset = $('.div1').offset()
        console.log(offset.left, offset.top)
        // 打印div2相对于页面左上角的位置
        var offset = $('.div2').offset()
        console.log(offset.left, offset.top)
        // 打印div1相对于父元素左上角的位置
        var position = $('.div1').position()
        console.log(position.left, position.top)
        // 打印div2相对于父元素左上角的位置
        var position = $('.div2').position()
        console.log(position.left, position.top)
    })
    // 2、点击btn2
    $('#btn2').click(function () {
        // 设置div2相对于页面左上角的位置
        $('.div2').offset({
            left: 50,
            top: 100
        })
    })
    </script>
    
  • 相关阅读:
    maven加载jar包配置
    JavaScript基础博客
    angularjs1 实现地图添加自定义控件(搜索功能)及事件
    AngularJS之Directive,scope,$parse
    HTML5 File详解
    angularjs上传图片
    input上传按钮美化
    AngularJs表单验证
    作用域与闭包
    理解JavaScript中的作用域和上下文
  • 原文地址:https://www.cnblogs.com/Lethons/p/9408064.html
Copyright © 2011-2022 走看看