clientWidth--用法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        /*box-sizing: border-box;*/
    }
    .a{
        width: 100px;
        height: 100px;
        background-color: red;
        /*margin:30px;*/
        padding: 30px;
        border:30px solid #969696;
    }
    </style>
</head>
<body>

<section id = ‘s‘class="a"></section>

<script type="text/javascript">
    alert(‘clientWidth:‘+document.getElementById("s").clientWidth);
    alert(‘clientHeight:‘+document.getElementById("s").clientHeight);
    alert(‘offsetWidth:‘+document.getElementById("s").offsetWidth);
    alert(‘offsetHeight:‘+document.getElementById("s").offsetHeight);
    alert(‘scrollWidth:‘+document.getElementById("s").scrollWidth);
    alert(‘scrollHeight:‘+document.getElementById("s").scrollHeight);
    alert(‘scrollTop:‘+document.getElementById("s").scrollTop);
    alert(‘scrollLeft:‘+document.getElementById("s").scrollLeft);
    alert(‘screenTop:‘+window.screenTop);
    alert(‘screenLeft:‘+window.screenLeft);
    alert(‘screen.height:‘+window.screen.height);
    alert(‘screen.width:‘+window.screen.width);
    alert(‘screen.availHeight:‘+window.screen.availHeight);
    alert(‘screen.availWidth:‘+window.screen.availWidth);
</script>
</body>
</html>
时间: 2024-08-08 15:27:06

clientWidth--用法的相关文章

scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法

这几个属性做滚动时会经常用到,现总如下: 首先定义一个div,样式如下: <style> *{ margin:0px; padding:0px;} body{ margin:0px; padding:10px; border:solid 10px #69F;} .aa{ margin:20px auto 0px; width:100px; height:50px; overflow:auto; border:solid 1px #cccccc; padding:0px 10px;} <

clientX、pageX、scrollLeft、offsetLeft、clientWidth、screen.width的用法和区别

一.定义和用法 1.event.clientX:事件对象的水平偏移量: event.clientY:事件对象的垂直偏移量: 2.event.pageX:事件对象加上滚动距离后的水平偏移量: event.pageY:事件对象加上滚动距离后的垂直偏移量: 3.$(selector).scrollLeft(offset)=$(selector).offset().left:获得或设置对象的滚动水平位置: $(selector).scrollTop(offset)=$(selector).offset(

jquery中的each用法以及js中的each方法实现实例

each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量. 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); a

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop。(转)

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011-07-28 17:20 6532人阅读 评论(1) 收藏 举报 浏览器firefoxopera文档htmlie 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offs

es6重要内容用法

ES6 一.ECMA历史 组成部分: ECMA.DOM.BOM 什么是ECMA?全称 ECMAScript 简写 ECMA 或 ES ECMA是一个标准,JS是实现 例如: HTML5 是标准,chrome,FF,IE10是实现 将来也可能有 xxxscript 实现ECMA 目前的版本: 低级浏览器: 主要支持es3.1,3.2 高级浏览器: 正从ES5过度到ES6 版本进化过程 1996 ES1.0 js稳定 Netscape将js提交给ECMA组织 1998 ES2.0 正式发布 1999

offsetHeight和offsetTop等属性用法

转自:http://blog.csdn.net/q67982154/article/details/51611989 offsetHeight和offsetTop等属性用法 又是这图,不错又是这图.... 一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定位就是position属性值为relative.absolute或者fixed.返回值是一个整数,单位是像素.此属性是只读的.二.of

document.body的一些用法以及js中的常见问题

document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth    (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: documen

jquery.nicescroll.min.js滚动条插件的用法

1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaperta.com */(function(f){"function"===typeof define&&define.amd?define(["jquery"],f):"object"===typeof exports?module.ex

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

20.5 Shell脚本中的逻辑判断;20.6 文件目录属性判断;20.7 if特殊用法;20.8 20.9 cace判断(上下)

扩展: select用法 http://www.apelearn.com/bbs/thread-7950-1-1.html 20.5 Shell脚本中的逻辑判断 格式1:if 条件 ; then 语句; fi 1. 创建if1.sh测试脚本: [[email protected] ~]# vi if1.sh a=5,如果a大于3,满足这个条件,显示ok 添加内容: #!/bin/bash a=5 if [ $a -gt 3 ] then echo ok fi 2. 执行if1.sh脚本: [[e