JS和CSS的交互

冷不防 2024-03-25 09:44 88阅读 0赞

### 一、JS与css交互的基本介绍 ###

#### 1、问题引入 ####

css样式设置三种方式： 行内式、内部式和外部式。  
JavaScript获取css样式有两种情况：**行内样式**和**非行内样式**

#### 2、行内样式 ####

通过\*\*`element.style.attr(元素.style)`\*\*可获取可设置

#### 3、非行内式 ####

因浏览器的不同，一种基于IE浏览器和非IE浏览器

基于IE的非行内获取：**`element.currentStyle['attr']`**  
基于非IE的非行内获取：**`getComputedStyle(element.null/伪类)[attr]`**  
【PS】非行内的只能获取不能设置\*

//函数封装，方便调用：兼容所有浏览器
    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 (事件被触动时，鼠标和键盘的状态，通过属性控制)`**

#### 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 可读写。（只读是获取值，可写是赋值）
 *  如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。（style.left在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）

#### 2、`client`系列 ####

\*\* `client` 客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以得到元素的边框大小，元素大小。\*\*

**`clientWidth` 和 `clientHeight`**

> `clientWidth`：获取网页可视区域宽度  
> `clientHeight`：获取网页可视区域高度

//奇怪的浏览器
    var w1=document.body.clientWidth;
    //标准浏览器
    var w2=document.documentElement.clientWidth;
    //IE9+
    window.innerWidth;

**`clienetX` 和 `clientY`**

> **`clientX`:鼠标距离可视区域左侧距离（event调用）**  
> **`clientY`:鼠标距离可视区域上侧距离（event调用）**

**`clientTop` 和 `clientLeft`**

> 获取盒子的border的宽高，  
> 获取屏幕的可视区兼容的写法

未声明DTD时

document.body.scrollTop

声明DTD时

document.documentElement.scrollTop

以上支持的

window.pageYOffset

#### 3、Scroll系列 ####

> `scroll` 滚动的，使用相关属性可得到改元素的大小。滚动距离等。

**`ScrollWidth` 和 `ScrollHeight`(不包border)**

> 检测盒子的宽高。（调用者：节点元素、属性）  
> 盒子内容的宽高。（如有内容超出，显示内容的高度）

#### 4、event事件对象 ####

> **一个事件中的内置对象，内部装了很多关于鼠标和事件本身的信息。**

**event的获取**

在事件绑定的函数中，加参数，这个参数就是ecent
    Box.onclick=function (event){
        }

**兼容获取方式**

*  不写参数直接使用event
 *  写参数，但是参数为event

event ||window.event

**scrennX 、pageX 和clientX 的区别**

`pageY /pageX`:鼠标位于整个页面的顶部和左侧部分的距离。（页面）  
`pcreenY /pcreenX`:鼠标位于屏幕的上方和左侧的距离。（屏幕）  
`clientY /clientX`:鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

**pageY 和pageX的兼容写法**

页面的位置=看得见+看不见
    pageX/Y=event.clientX/Y+scroll().top/scroll().left

#### 5、三大系列区别 ####

1.  **Width 和 height**

> `clientWidth`=`width`\+`padding`  
> `clientHeight`=`height`\+`padding`  
> `offsetWidth`=`width`\+`padding`\+`border`  
> `offsetHeight`=`height`\+`padding`\+`border`  
> `scrollWidth`=内部宽度（不包含border）  
> `scrollHeight`=内部高度（不包含border）

2.**top 和 left**

> `offsetTop`/`offsetleft`:  
> 调用者：任意元素。（盒子为主）  
> 作用：距离父系盒子中带有定位的距离  
> `scrollTop`/`scrollLeft`:（盒子也可以调用，必须有滚动条）  
> 调用者：  
> document.body.scrollTop/…(window)  
> 作用：浏览器无法显示的部分（被卷去的部分）  
> `clientY`/`clientX`:(clientTop/clientLeft 值得是border)  
> 调用者：event.clientX(event)  
> 作用：鼠标距离浏览器可视区域的距离（左、上）

#### 6、获取屏幕宽高 ####

window.screen.width
    window.screen.Height
    【ps】分辨率是屏幕图像的精密度，指显示器的像素有多少。

[上一章：DOM编程进阶（JS）][DOM_JS]  
[下一章：表单验证（JS）][JS]

[DOM_JS]: https://blog.csdn.net/weixin_74383330/article/details/129487948
[JS]: https://blog.csdn.net/weixin_74383330/article/details/129492287