JS与CSS交互详细介绍

简介: JS与CSS交互详细介绍

一. JS与CSS交互基本介绍

1.1 问题引入

  • css样式设置有三种方式:行内样式,内部样式和外部样式。
  • JavaScript获取css样式时分为两种情况:行内样式获取罚和非行内样式获取法。

1.2 行内样式

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

1.3 非行内样式

  • 因浏览器的不同又分为两种,即基于IE浏览器的 和 非IE浏览器的 如谷歌火狐等。
  • 基于IE浏览器的非行内样式获取法:通过

element.currentStyle[attr]

  • 基于非IE浏览器的非行内获取法:通过

getComputedStyle(element.null / 伪列)[attr]

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

// 函数封装,方便多次调用:兼容所有的浏览器 ,包括IE6 7
function getStyle (obj,name){// obj:操作哪一个标签 name:该标签的属性
       if(obj.currentStyle){ //兼容IE
           return obj.currentStyle[name];
       }else{ //兼容非IE浏览器 如谷歌,火狐等
             return getComputedStyle(obj,false)[name];
       }
}

二. JavaScript特效之四大家族

  • 三大系列:offset ,scroll ,client
  • 事件对象:event (事件被触动时,鼠标和键盘的状态)(通过属性控制)

2.1 offset 系列

offset :偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等。
  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
offsetWidth和offsetHeight
  • 检测盒子自身宽高 + padding + border
offsetWidth = width + padding + border
offsetHeight = height + padding + border
offsetLeft 和 offsetTop
  • 检测距离父盒子有定位的左/上的距离

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

与盒子本身有无定位无关。

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

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

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

offsetLeft 和 style.left 的区别
  • 最大区别在于offsetLeft可以返回没有定位盒子的左侧的距离的位置。style.left不可以。
  • offsetLeft返回的是数字,style.left返回的是字符串,除了数字外还带有单位:px
offsetTop 和 style.top 的区别
  • offsetTop只读,而style.top可读写。(只读是获取值,可写是赋值)
  • 如果没有给HTML元素指定过top样式,则style.top返回的是空字符串。(style.top在等号的左边和右边不一样。左边是属性,右边是值)

2.2 client事件

client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等。
clientWidth 和 clientHeight
clientWidth:获取网页可视区域宽度
clientHeight:获取网页可视区域高度
调用者不同,意义不同:
盒子调用,指盒子本身;body / html 调用,指可视区域大小。
var w1 = document.body.clientWidth;
console.log("怪异浏览器====>:"+w1)
var w2 = document.documentElement.clientWidth;
console.log("标准浏览器====>"+w2)
console.log("IE9+====>"+window.innerWidth);
clientX 和 clientY
clientX : 鼠标距离可视区域左侧距离(event调用)
clientY : 鼠标距离可视区域上侧距离(event调用)
clientTop 和 clientLeft
获取盒子的 border 宽高

2.3 Scroll 系列

scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小,滚动距离等。
ScrollWidth 和 ScrollHeight (不包括border)
检测盒子的宽高 (调用者 节点属性,属性)
盒子内容的宽高 (如果有内容超出,显示内容的高度)
IE567可以比盒子小。IE8 + 火狐谷歌不能比盒子小。
scrollTop 和 scrollLeft
网页被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。

有兼容性问题

未声明 DTD 时(谷歌只认识他)
document.body.scrollTop
已经声明DTD 时(IE678只认识他)
document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的
window.pageYOffset

2.4 event事件对象

  • 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息。
  • 所有浏览器都支持event对象,但支持的方式不同。比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。
  • (类似Date)普通浏览器支持event(带参,任意参数)IE678支出window.event(无参,内置)

总结 :他是一个事件中的内置对象,内部装了很多关于鼠标和事件本身的信息。

事件event对象的获取
IE678中,window.event 
在火狐谷歌中,event或者,在事件绑定的函数中,加参,这个参数就是event.
Box.onclick = function (aaa){   //aaa就是event     }
兼容获取方式
  • 不写参数直接使用event 。
  • 写参数,但是参数为event 。
var event = event || window.event ;(主要用这种)
相关文章
|
8天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
80 24
|
9天前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
103 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
19天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
45 13
|
27天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
45 3
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
55 5
|
2月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
23 0
|
移动开发 JavaScript Android开发