javascript(JS与css交互)详细介绍

一,JS与css交互基本概述

  • css有三种设置样式:行内样式,内部样式及外部样式

  • JavaScript获取css样式分两种情况:行内样式获取法非行内样式获取法

行内样式

通过element.style.attr(元素.style.属性) 即可获取设置

非行内样式

  • 因浏览器的不同又分为两种,即基于IE浏览器的

和 非IE浏览器的如谷歌火狐等。

  • 基于IE浏览器的非行内获取法:通过 element.currentStyle['attr']

  • 基于非IE如火狐谷歌等非行内获取法:通过 getComputedStyle(element.null/伪类)[attr]

【注意事项】非行内样式获取法,只能获取不能设置。

二,javaScript四大特性家族(offset/scroll/client/event )

三大系类:offset,scroll,client

事件对象:event系类(事件被触发时,鼠标和键盘的状态) (通过属性控制)

2.1 offset系类

offset:偏移量使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

  • .获得元素距离带有定位父元素的位置

  • .获得元素自身的大小(宽度高度)

(1) offsetWidth 和 offsetHeight (检测盒子自身宽高+padding+border)

** offsetWidth = width + padding + border;

** offsetHeight = Height + padding + border;

(2) offsetLeft 和 offsetTop (检测距离父盒子有定位的左/上面的距离)

返回距上级盒子中带有定位的盒子左边和上边的距离。和盒子本身有无定位无关。

如果父级都没有定位则以 body 为准。

offsetLeft 从父级的 padding 开始算,父级的 border 不算。

在父盒子有定位的情况下,offsetLeft == style.left (去掉px)

(3) offsetLeft 和 style.left 区别

① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。

② offsetLeft 返回的是数字,而 style.left 返回的是字符串,除了数字外还带有单位:px。

③ offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)

④ 如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。

(style.left在等号的左边和右边还不一样。左边的时候是属性,右边的时候是值。)

           //获取div标签距离父标签的距离。
             console.log(oDiv.offsetLeft);
            console.log(oDiv.offsetTop);
            // offsetWidth|offsetHeight  宽度:width+边框+内填充
            console.log(oDiv.offsetWidth);
            console.log(oDiv.offsetHeight);
            // style属性:只能调用行内样式
            console.log(oDiv.style.width);
        
            //通过currentStyle或者getComputedStyle解决非行内式样式的获取
            var width = getStyle(oDiv,"width");
            console.log(width);

2.2 client系类

client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

(1)clientWidth 和 clientHeight

clientWidth:获取网页可视区域宽度(两种用法)

clientHeight:获取网页可视区域高度(两种用法)

调用者不同,意义不同:

盒子调用,指盒子本身;body/html调用,指可视区域大小。

(2)clientX 和 clientY

clientX:鼠标距离可视区域左侧距离(event调用)

clientY:鼠标距离可视区域上侧距离(event调用)

(3) clientTop 和 clientLeft

获取盒子的 border 宽高

(4)获取屏幕的可视区

var width = (document.documentElement.clientWidth || document.body.clientWidth)

var height = (document.documentElement.clientHeight || document.body.clientHeight)

       //获取指定元素的父级元素对象,如果父级对象没有定位直接指向body
            console.log(oDiv.offsetParent);
            console.log("-------------------------------------------------");
            //clientTop获取上边框的大小
            console.log(oDiv.clientTop);
            //clientLeft获取左边框的大小
            console.log(oDiv.clientLeft);
            //获取指定元素的宽度(width+内填充)
            console.log(oDiv.clientWidth);
            //获取指定元素的宽度(width+内填充)
            console.log(oDiv.clientHeight);//200

2.3 Scroll系类

scroll翻译过来就是滚动的,我们使用scroll系类的相关属性可以

动态得到该元素的大小滚动距离等

(1) scroll Width和scroll Height(不包括border)

检测盒子的宽度。(调用者:节点元素。属性)

盒子内容的宽度。(如果有内容超出了,显示内容的高度)

IE567可以比盒子小。IE8+火狐谷歌不能比盒子小

2)scrollTop 和 scrollLeft

网页,被浏览器遮挡的头部和左边部分。

被卷去的头部和左边部分。

(3)有兼容性问题

① 未声明 DTD 时(谷歌只认识他)

document.body.scrollTop

② 已经声明DTD 时(IE678只认识他)

document.documentElement.scrollTop

③ 火狐/谷歌/ie9+以上支持的

           //获取被滚动条滚去的距离
             window.onscroll = function(){
                var scrollDemo = scroll();
                console.log(scrollDemo.left)
                console.log(scrollDemo.top)
            };
 
            //div的实际高度
            console.log("width: "+oDiv.scrollHeight);
            console.log("width: "+oDiv.scrollWidth);

2.4 event 事件对象

(1)概述

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的 信息。

所有浏览器都支持event对象,但支持的方式不同。

比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)

普通浏览器支持 event(带参,任意参数)

ie 678 支持 window.event(无参,内置)

(2) 事件对象 event 的获取

IE678中,window.event

在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.

Box.onclick = function (aaa){ aaa就是event }

(3) 兼容获取方式有两种:

不写参数直接使用event;

写参数,但是参数为event

var event = event || window.even

你可能感兴趣的:(css,javascript,前端)