当前位置:  编程技术>WEB前端
本页文章导读:
    ▪clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别      clientWidth:元素内容区的宽度加上左右padding的值,如果有滚动条,不包括滚动条的宽度clientHieght: 元素内容区的高度加上上下padding的值,如果有滚动条,不包括滚动条的高度clientLeft:元素左边框.........
    ▪透明度设置      W3C设置透明度element.style.opacity = value(0-1 0代表完全透明,1代表不透明)IE中element.style.filter = "alpha(opacity = value)" (0-100 0代表完全透明,100代表不透明),并且子元素如果定位后(不管相对定位,还是.........
    ▪获取屏幕的宽高      window.screen.width//屏幕宽度window.screen.height//屏幕高度window.screen.screenTop//网页正文部分上window.screen.screenLeft//网页正文部分下window.screen.colorDepth //屏幕 位彩色; window.screen.deviceXDPI  //屏.........

[1]clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别
    来源:    发布时间: 2013-11-06

clientWidth:元素内容区的宽度加上左右padding的值,如果有滚动条,不包括滚动条的宽度

clientHieght: 元素内容区的高度加上上下padding的值,如果有滚动条,不包括滚动条的高度

clientLeft:元素左边框的宽度,如果没有边框,就是0

clientTop:元素上边框的宽度,如果没有边框,就是0

 

scrollWidth:元素的滚动宽度,不包括元素边框和滚动条宽度,即元素边框和滚动条之间的宽度加上延伸到元素外面的部分

scrollHeight:元素的滚动高度,不包括元素的边框盒滚动条宽度,即即元素边框和滚动条之间的高度加上延伸到元素外面的部分

scrollLeft:元素水平滚动的距离

scrollTop: 元素垂直滚动的距离

 

offsetWidth:元素从左边框到右边框的宽度

offsetHeight: 元素从上边框到下边框的高度

offsetLeft:元素从左边框到html元素边框的距离(包括html的边框宽度,不包括元素本身的边框宽度)

offsetTop: 元素从上边框到html元素边框的距离(包括html的边框宽度,不包括元素本身的边框宽度)

另外,FF中的window属性innerWidth innerHeight只的是显示文档的整个视窗的宽度和高度(即浏览器中除了工具栏,菜单栏,地址栏以外的部分),而outerWidth outerHeight指的是整个浏览器窗口的宽度和高度,即文档视窗高度和宽度 + 工具栏,地址栏,菜单栏这些部分

以上的结论是通过下面测试代码得出:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>测试三</title>
<script type = "text/javascript" src = "myUtil.js"></script>
<script type = "text/javascript">
function test() {
myUtil.addEvent("div2", "scroll", function() {//绑定滚动事件
display();
});
display();
}
function display() {
var div1 = myUtil.byId("div1");//获取金色背景div框的引用
var str1 = getAll(div1);//获取div1的相关属性字符串
var div2 = myUtil.byId("div2");//获取银色背景的引用
var str2 = getAll(div2); //获取div2的相关属性字符串
var div3 = myUtil.byId("div3"); //获取显示框的引用
div3.innerHTML = "";
div3.innerHTML = "div1:<br />" + str1 + "div2:<br/>" + str2; //显示
}

    
[2]透明度设置
    来源:    发布时间: 2013-11-06

W3C设置透明度

element.style.opacity = value(0-1 0代表完全透明,1代表不透明)

IE中

element.style.filter = "alpha(opacity = value)" (0-100 0代表完全透明,100代表不透明),并且子元素如果定位后(不管相对定位,还是绝对定位,父元素的透明度不影响子元素)

本文链接


    
[3]获取屏幕的宽高
    来源:    发布时间: 2013-11-06

window.screen.width//屏幕宽度

window.screen.height//屏幕高度

window.screen.screenTop//网页正文部分上

window.screen.screenLeft//网页正文部分下

window.screen.colorDepth //屏幕 位彩色; 
window.screen.deviceXDPI  //屏幕 像素/英寸;

本文链接


    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3