zoukankan      html  css  js  c++  java
  • 对象的宽度、top位置,x坐标属性

    DOM对象

      DOM对象属性 对应css 说明 读/写
    width   obj.clientWidth=20

    1. 内联样式

    <p style="20px"></p>

    2. 内部/外部CSS

    <style>
    p{
        width: 20px;
        border: 0;
        padding: 0;
    }
    </style>
    <p></p>

    在页面上返回内容的可视宽度

    (内容+padding)

    不包括边框,边距或滚动条

    只读
    obj.scrollWidth=20

    1. 内联样式

    2. 内部/外部CSS

    子元素整个盒子宽度以及当前元素左侧padding值

    (内容+padding)

    只读
    obj.offsetWidth=20

    1. 内联样式

    2. 内部/外部CSS

    返回元素的宽度,

    包括边框和填充

    (内容+padding+border)

    只读
    obj.style.width="20px"  <p style="20px"></p>

    内联中定义才能读到值,否则为空

    可写
    obj.width   这个属性并没有  
    height     与width一样   
    top  obj.offsetTop=20   元素border外侧相对父元素border内侧垂直方向的偏移量 只读
    obj.scrollTop=20  

    overflow:scroll时会出现滚动条

    当前内容的顶部相对原始内容顶部的距离

    可写
    obj.style.top="20px"  

    内联中定义才能读到值否则为空

    可写
    left     与top一样   

    Window窗口

      属性 说明
    width window.innerWidth 窗口的文档显示区的宽度
    window.outerWidth 窗口的外部宽度,包含工具条与滚动条
    height   与width相似
    left window.screenLeft 返回相对于屏幕窗口的x坐标
    top   与left相似

    event事件

    纵坐标与横坐标类似,这里只列出横坐标

    属性 说明
    event.screenX
    鼠标指针相对于电脑屏幕的水平坐标
    event.clientX

    鼠标指针向对于浏览器页面(或可见区域)的水平坐标

    event.pageX

    鼠标指针相对于整个文档的水平坐标

  • 相关阅读:
    idea + springboot 的java后台服务器通过小米推送
    python编程之禅
    温故而知新-MySQL高级编程
    温故而知新-mysql的一些语法show,describe,explain,fulltext
    温故而知新-PHP文件操作函数
    温故而知新-正则单词和strlen
    php使用tcpdf实现在线PDF功能
    温故而知新-array_walk和sizeof和array_count_values()和extract()
    温故而知新-strtok函数
    mysql中的blob和text区别
  • 原文地址:https://www.cnblogs.com/coolqiyu/p/7153482.html
Copyright © 2011-2022 走看看