js的client详解

clientWidth:可视区宽       说明:样式宽+padding

clientHeight:可视区高       说明:样式高+padding

elem.clientWidth //获取元素的样式宽+padding

document.documentElement.clientWidth //获取文档的样式宽+padding

例子说明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #d1{width:100px;height:100px;background:red;padding:50px;margin:50px;border:10px solid black;}
    </style>
</head>
<body>
    <div id="d1"></div>
    <script>
        var dom = document.getElementById(‘d1‘);
        console.log(dom.clientWidth + ‘,‘ + dom.clientHeight);
        console.log(document.documentElement.clientWidth + ‘,‘ + document.documentElement.clientHeight);
    </script>
</body>
</html>

ie7/ie9:

时间: 2024-11-01 18:06:29

js的client详解的相关文章

js new date详解

创建一个日期对象: var objDate=new Date([arguments list]); var ini_date=new Date(2014,7,0); //是代表7月最后一天 ,也就是2014-07-31 var ini_date=new Date(2014,7,1); //是代表8月第一天 ,也就是2014-08-01参数形式有 以下5种: new Date("month dd,yyyy hh:mm:ss");   new  Date("month dd,yy

【JS】☆★之详解[Object HTMLDivElement]和[Object Object]

[JS]☆★之详解[Object HTMLDivElement]和[Object Object] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Js apply 方法 详解

Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他

JS事件类型详解

一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发 此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发 此事件 onmousemove IE4.N4 鼠标移动时触发 此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发 此事件 onkeypress IE4.

Node.js继承中的静态类对象(《node.js开发实战详解》书中一些错误的改正)

今天气真好,最近挂掉一些面试之后心情略失落. 神马都是浮云,要永远做好世界第二. 不多提了,你问我心态为啥变好了.-------都是情怀,,. 嗯啊,最近在研究node. 别人问?你这水平还node... 哈哈哈,好伤心.... 不多提了,言归正传. 神马模块化神马的先就不多讲了,就一个module.export和export区别,后者对象的属性属于前者,逆命题不成立. 还有util.inherits(A,B)这个API注意一下A只会继承B的原型方法,原型以外的不会继承.不是说原型中数据是共享的

JS变量对象详解

JS变量对象详解 开年之后工作热情一直不是很高,这几天一直处于消极怠工状态.早上不想起床,起床了不想上班.明明放假之前工作热情还一直很高,一直心心念念的想把小程序项目怼出来,结果休假回来之后画风完全不一样了.我感觉自己得了严重了节后综合征.还好撸了几篇文章,勉强表示这一周的时间没有完全浪费.这篇文章要给大家介绍的是变量对象. 在JavaScript中,我们肯定不可避免的需要声明变量和函数,可是JS解析器是如何找到这些变量的呢?我们还得对执行上下文有一个进一步的了解. 在上一篇文章中,我们已经知道

Hadoop3.1.1源码Client详解 : Packet入队后消息系统运作之DataStreamer(Packet发送) : 主干

该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 在上一章(Hadoop3.1.1源码Client详解 : 写入准备-RPC调用与流的建立) 我们提到,在输出流DFSOutputStream创建后,DataStreamer也随之创建,并且被启动 下文主要是围绕DataStreamer进行讲解 DataStreamer是一个守护线程类,继承关系如下.       观察DataStreamer的run方法,没有意外的,我们可以发现他和普通的做法一样,用

OC与JS的交互详解

事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > 标签自动加载,并把下载图片的操作放在native端来处理,并通过JS将图片在Cache中的地址返回给UIWebview. 之所以要把图片操作放在

js中eval详解,用Js的eval解析JSON中的注意点

先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法“{}”并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: var s1='"a" + 2'; //表达式var s2='{a:2}'; //语句alert(eval(s1)); //->'a2'alert(eval(s2)); //->und