DOM 基础

 

window.event    clientX,clientY   获取鼠标在浏览器中的位置

 

对象在页面居中:

document.documentElement.clientWidth /2 - 对象宽度/2

document.documentElement.clientHeight /2 - 对象宽度/2

 

div透明背景:

.div1{

 background-color:black;

position:absolute;

filter:alpha(opacity=50,Style=0);

   /*---定义透明度,和淡化的风格

   opacity为透明度，值越大透明度越小

   style是透明淡化的风格

   0 普通透明

   1 从左到右渐变淡化

   2 圆形像两边淡化

   3 星状渐变淡化

   默认不设置style参数为0 */

}

不设置高度，高度就自动随内容变化 

 

去除超链接下划线

text-decoration:none;

 

常用超链接CSS属性:

先看一下常用设置：

a:link 超链接的普通样式

a:visited 点击过的

a:hover 鼠标经过时的

a:active 单击时

a:link{text-decoration:none;}       无下划线

a:link{text-decoration:underline;}   有下划线 

 

快速创建元素并且赋值,注意设置的inner部分不会被设置:

var input = document.createElement("<input type='button' value='hello' />");

 

label.setAttribute("for","username");//设定一些Dom元素属性名特殊的属性label.for ="username"会有问题

 

页面大小属性:

function displayScreenSize() 

 

{ 

 

var docHeight =document.documentElement.clientHeight;//网页可见区域宽 

var docHeightWithBorder=document.documentElement.offsetHeight //网页可见区域高(包括边线的宽) 

var bodyWidth =document.body.clientWidth; //网页可见区域宽 

var bodyHeight =document.body.clientHeight; //网页可见区域高 

var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽) 

var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽) 

var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽 

var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高 

var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距 

var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距 

var windowTopHeight =window.screenTop; //网页正文部分上边距 

var windowLeftWidth =window.screenLeft; //网页正文部分左边距 

var screenHeight =window.screen.height; //屏幕分辨率的高 

var screenWidth =window.screen.width; //屏幕分辨率的宽 

var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度 

var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度 

 

}

 

右对齐:

float:right;

 

超链接调用函数要用javascript:

<a href = "javascript:showDiv()" >登陆</a>

 

var data = {"thumb/001_thumb.jpg":["pic","小云",18]};//要用for(var i in data)遍历,不能用for(var i=0;i<data.length.i++)

 

自定义创建,读取数据集:

        function loadImg() {

            var data = { "thumb/001_thumb.jpg": ["pic/001.jpg", "小云", 18] };

            var text = "";

            for (var smallPicPath in data) {

                var picPath = data[smallPicPath][0];

                var name = data[smallPicPath][1];

                var age = data[smallPicPath][2];

                var img = document.createElement("img");

                img.title = "点击显示大图";

                img.src = smallPicPath;

                document.body.appendChild(img);

            }

        }

 

设置自定义属性:

img.setAttribute("picPath", picPath);

取自定义属性的值:

var picPath = event.srcElement.getAttribute("picPath");