day15.DOM基本操作CSS脚本化

最新推荐文章于 2024-06-28 10:57:06 发布

Tiny_G

最新推荐文章于 2024-06-28 10:57:06 发布

阅读量391

点赞数

分类专栏： JavaScript 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_45801179/article/details/122893654

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

BOM基本操作

1）查看滚动条的滚动距离
- IE9以上的方法：window.pageXoffset/pageYOffset
- IE8及IE8以下兼容方法：①document.body.scrollLeft/scrollTop
  
  ②documentElement.scrollLeft/scrollTop
  
  注意：由于兼容性特别混乱，因此以上两种方法没有对应绝对的浏览器版本。在一个浏览器中或许这个有用，或许那个有用。但两个方法在同一浏览器是“互斥的”，当一个有值的时候另一个一定是0，所以在IE8及IE8以下两者相加就可以了。
封装兼容性方法，getScrollOffset();

2)查看可视区窗口的尺寸
- IE9以上：window.innerWidth/innerHeight
- IE8及IE8以下兼容方法：
  
  注意：以下标准模式下，任意浏览器兼容(即：!DOCTYPE HTML)
  
  document.documentElement.clientWidth/clientHeight
  
  注意：适合于怪异模式下的浏览器
  
  document.body.clientWidth/clientHeight
判断当前模式：document.compatMode //CSS1Compat标准模式；BackCompat向后兼容

3）查看元素的几何尺寸

方法：dom.getBoundingClientRect();
- 兼容性很好
- 该方法返回一个对象，对象里有left,top,right,bottom等属性。left和top代表该元素的左上角的X和Y的坐标，right和bottom代表元素右下的X坐标和Y坐标
- 注意：height和width属性在老版本的IE中并未实现
- 注意：返回的结果不是“实时的”
```
	var div1 = document.getElementsByTagName("div")[0];
    console.log(div1.getBoundingClientRect());
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1oJA0TJ7-1644634967190)(E:\learning\笔记\img\image-20210529235151596.png)]

4）目前“通用的”查看元素尺寸的方法

方法：dom.offsetWidth,dom.offsetHeight//dom指dom节点

注意：包括dom元素的padding宽度。
```
<body>
    <div style="width: 100px;height: 100px;background-color: #f0f;
    position: absolute;margin:100px;padding:50px;"></div>
</body> 
</html> 
<script>
    var div1 = document.getElementsByTagName("div")[0];
</script>
```

在这里插入图片描述

5）查看元素位置

-   **方法**：dom.offsetLeft,dom.offsetTop

-   `注意：`对于无定位父级的元素，返回相对文档的坐标。对于有定位的元素，返回相对于最近的有定位的父级的坐标

-   方法：dom.offsetParent

-   返回最近的有定位的父级，如五，则返回body。注：body.offsetParent返回null

    `Tip:`封装函数：元素的相对于文档的定位的坐标:	

#### 6）滚动条滚动

-   window上有三个方法：

    widow.sroll/window.scrollTo(x轴距离，y轴距离):滚动到指定位置

    window.scrollBy(x, y);会在之前的滚动位置累加

-   应用eg:自动阅读

脚本化（控制）CSS
1. 读写元素CSS属性（可写）：获取行间样式
  
  格式：dom.style.prop
  
  注意
  - 可读写行间样式，灭幼兼容性问题，碰到float这样的保留字属性，前面应加css (eg:float->cssFloat)
  - 复合属性必须拆解，组合单词变成小驼峰式的写法
    
    注意：
    1. eg:div.style.border中border就是复合属性，建议borderWidth\borderColor分开写
    当JS中要表达像：ｄｉｖ．ｓｔｙｌｅ．ｂａｃｋｇｒｏｕｎｄＣｏｌｏｒ，出现”－“时，因此ｓｔｙｌｅ后的属性为”小驼峰“式的（因为ＪＳ的命名规则不允许出现”－“）
  - 写入的值必须是字符串格式
2. 查询计算样式（只读）:获取当前元素的展示CSS值（获取的值都是经过最后计算显示在屏幕上的值）
  
  格式：window.getComputedStyle(ele, null);
  
  注意：
  - 计算返回的都是绝对值，没有相对单位
  - IE8及IE8以下不兼容
  IE8及其以下兼容方法：ele.currentStyle(IE独有)
  - 计算样式只读
  - 返回的计算样式的值不是经过转换的绝对值
  - IE独有的属性
  注意：window.getComputedStyle(ele,null)：第二位参数的作用：获取伪元素的样式值
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作css</title>
    <style>
        .div::after{
            content: "";
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="div" tyle="width: 100px;height: 200px;background-color: aquamarine;"></div>
</body>
</html>
<script>
    var  div = document.getElementsByTagName("div")[0];
    console.log(window.getComputedStyle(div,'after').width);
    // document.write(div.currentStyle['width']);
</script>
```
  1.伪类的应用：
  
  思路1：在css里面写两个类，通过js改变元素的类名从而改变味蕾
  
  2.样式状态的切换：
  
  思路1：ele.style.XXX = “”（浪费效率）
  
  思路2：提前在CSS里面写好两种状态，通过改元素类名实施更改
  
  getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

思路1：ele.style.XXX = “”（浪费效率）

   思路2：提前在CSS里面写好两种状态，通过改元素类名实施更改

   getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

Tiny_G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day15.DOM基本操作CSS脚本化

BOM基本操作1）查看滚动条的滚动距离IE9以上的方法：window.pageXoffset/pageYOffsetIE8及IE8以下兼容方法：①document.body.scrollLeft/scrollTop ②documentElement.scrollLeft/scrollTop注意：由于兼容性特别混乱，因此以上两种方法没有对应绝对的浏览器版本。在一个浏览器中或许这个有用，或许那个有用。但两个方法在同一浏览器是“互斥的”，当一个有值的时候另一个一定是0，所以..
复制链接

扫一扫