脚本化CSS（行内样式表和计算样式表、获取元素的显示尺寸、获取元素的位置）

最新推荐文章于 2024-06-07 10:30:53 发布

巧克力很苦

最新推荐文章于 2024-06-07 10:30:53 发布

阅读量607

点赞数 3

分类专栏： JavaScript 文章标签：脚本化CSS（行内样式表和计算样式表、获取元素的显示尺寸、获取元素的位

本文链接：https://blog.csdn.net/qq_44607694/article/details/94860956

版权

JavaScript 专栏收录该内容

60 篇文章 5 订阅

订阅专栏

行内样式表和计算样式表

这是我们在CSS中设置的样式：

  *{
       margin:0;
       padding:0;
   }
 #box{
       width: 200px;
       height: 100px;
       background-color: pink;
   }

通过Js获取#box这个元素：

var oBox = document.getElementById("box");
        console.log(oBox); oBox是元素节点

在这里插入图片描述

行内样式表

如何获取当前元素节点的行内样式表？？？

<div id="box"></div>
var oBox = document.getElementById("box");
        console.log(oBox.style);
        //获取的行内样式表是一个对象格式的（他把所有CSS样式放在一个对象中）

在这里插入图片描述
style：样式、Declaration：所有CSS的声明的集合

为什么width：""值是空的？
在这里插入图片描述

从CSS的角度来说样式分：内联式（行内样式）、嵌入式、外部式
而oBox.style获取的是行内样式表，而不是别的类型的样式

在 内联式（行内样式） 里面写CSS样式才能查询到width的值

   <div id="box" style="width: 300px;"></div>
    <script>
        var oBox = document.getElementById("box");
        console.log(oBox.style);//获取的是行内样式表
    </script>

在这里插入图片描述
行内样式表他是一个对象那么想获取width、height具体的值呢？？

<div id="box" style="width: 300px; height: 200px;"></div>

var oBox = document.getElementById("box");
        console.log(oBox.style.width);//查询对象的width属性方法一
        console.log(oBox.style["height"]);//查询对象的wheight属性方法二

在这里插入图片描述
那么如何通过行内样式表设置某个属性？？

<div id="box" style="width: 300px; height: 100px"></div>
var oBox = document.getElementById("box");
        oBox.style.height = '200px';//通过对象来赋值设置CSS的属性

在这里插入图片描述
有连接符该怎么设置属性-

var oBox = document.getElementById("box");
        oBox.style.backgroundColor = "blue";
        //在CSS中有连接符的属性在Js中使用对应的驼峰来转换

在这里插入图片描述
那么有像float这种保留字的CSS属性该怎么设置？？

<div id="box" style="width: 300px; height: 100px"></div>
var oBox = document.getElementById("box");
        oBox.style.cssFloat = 'right';

在这里插入图片描述
JS中的关键字和保留字了解一下

总结： 元素节点.style 获取的是行内样式表

一般使用内联式（行内样式）表来设置某些css属性
可读可写，可以通过行内样式间接控制css属性
含有连词符的css属性需要使用小驼峰写法
float是js里面的保留字一般使用cssFloat
设置的值要求是字符串形式

计算样式表

怎么获取计算样式表？？

var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox,null));
        //中括号里第一个参数是获取那个元素节点上的计算属性，他也是一个对象格式的

在这里插入图片描述
查询当前计算样式表中的width值

var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox,null).width);

在这里插入图片描述
那么有理由推理出来计算样式表获取的是嵌入式的样式？？

   <style>
        #box{
            width: 200px; 
            height: 100px;
            background-color: pink;
        }
    </style>
  <div id="box" style="width: 300px;"></div>
    <script>
        var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox,null).width);
    </script>

在这里插入图片描述
答案并不是我们推理出来的200px而是300px那是为什么呢？？

其实计算样式表的计算方式是当前这个元素在页面最终展示的结果、他获取的是属性在页面最终所有展示定型的属性集合、也可以理解为CSS的computed面板里面展示当前元素要展示的值（他直接把属性名和属性值做出了一个对象）他是作为一个对象包装在计算样式表内

CSS的样式优先级内联式>嵌入式>外部式也可以通过!important; /*把当前属性的权重最大*/把元素权重提上到最大

也可以理解为、在计算样式表内元素的权重越大就会计算出元素的指定样式

如：CSS的优先级

 <div id="box" style="width: 300px;"></div>
    <script>
        var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox,null));
    </script>

在这里插入图片描述
如：用!important在嵌入式里把CSS的权限提到最大

#box{
      width: 200px !important; /*让当前这个属性的权重最大*/
      height: 100px;
      background-color: pink;
 }
<div id="box" style="width: 300px;"></div>
    <script>
        var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox,null).width);
    </script>

在这里插入图片描述
window.getComputedStyle(oBox,null)中括号里面第二个参数表示什么呢？？

其实任何一个元素都有伪元素，如：

    #box::after{
            content: "";
            display: block;
            width: 20px;
            height:50px;
            background-color: lightblue;
        }

那么如何获取伪元素的计算样式表呢？？

var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox, "after"));

在这里插入图片描述
那么如何获取伪元素的计算样式表里面的width值呢？

var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox, "after").width);

在这里插入图片描述

IE8以下浏览器用什么方式获取计算样式表

dom.currentStyle IE8以下获取计算样式表

var oBox = document.getElementById("box");
        console.log(oBox.currentStyle)

在这里插入图片描述
表示在谷歌高版本的浏览器是没有这个计算样式表的（IE8及其以下有）

结论： window.getComputedStyle(dom,null) IE8及以上
获取的是计算样式表（computed面板属性名和属性值组成的对象）

一般计算样式表用来获取css属性
null可以换成after或者before 这样能够获取伪元素的计算样式表

dom.currentStyle IE8以 下获取计算样式表

计算样式表一般用来获取的，行内样式表一般用来设置的

怎么能让计算样式表的代码在谷歌和IE浏览器以下都能使用我们该怎么办

写一个兼容函数

  var oBox = document.getElementById('box');
    function getStyle(dom,attr){    //获取计算样式表中的属性
        if(dom.currentStyle){   //IE8以下
            return dom.currentStyle[attr];
        }else{           //IE8及以上
            return window.getComputedStyle(dom,null)[attr]
        }
    }

    console.log(getStyle(oBox, 'height'));

这样就可以判断兼容浏览器了

获取元素的显示尺寸

从计算样式表中查询width属性

        #box{
            width:200px;
            height: 100px;
            padding: 20px 30px;
            background-color: pink;
        }
         <div id="box"></div>
    <script>
        var oBox = document.getElementById("box");
        console.log(window.getComputedStyle(oBox, null).width)
    </script>

在这里插入图片描述
但是这个元素在页面上真实显示的尺寸是260px;，

那该怎么获取真实显示的元素的width、height值呢？？

dom.clientWidth width+左右的padding（常用）只能读取不能设置

var oBox = document.getElementById("box");
        console.log(oBox.clientWidth);

在这里插入图片描述
当前元素的width值是260（width：200+padding-left：30+padding-right：30=260）

dom.clientHeight height+上下的padding（常用）只能读取不能设置

 var oBox = document.getElementById("box");
        console.log(oBox.clientHeight);

在这里插入图片描述
当前元素的height值是140（height：100+padding-top：20+padding-bottom：20=140）

如果有border那该怎么获取真实显示的元素的width、height值呢？？

    #box{
            width:200px;
            height: 100px;
            padding: 20px 30px;
            border: 10px solid yellow;
            background-color: pink;
        }

dom.offsetWidth width+左右的padding+左右的border 只能读取不能设置

var oBox = document.getElementById("box");
        console.log(oBox.offsetWidth);

在这里插入图片描述
当前元素width值是280（width:200+padding-left:30+padding-right:30+border-left:10+border-right:10=280）

dom.offsetHeight height+上下的padding+上下的border 只能读取不能设置

var oBox = document.getElementById("box");
        console.log(oBox.offsetHeight);

在这里插入图片描述
当前元素height值是160（height:100+padding-top:20+padding-bottom:20+border-bottom:10+border-top:10=160）

当元素实际内容超过设置的内容时？？

    #box{
            width:200px;
            height: 100px;
            background-color: pink;
        }
    <div id="box">
        yellowyellowyellowyellowyellowyellow
        yellowyellowyellowyellowyellowyellow
        yellowyellowyellowyellowyellowyellow
        yellowyellowyellowyellowyellowyellow
        yellowyellowyellowyellowyellowyellow
        yellowyellowyellowyellowyellowyellow
        yellowyellowyellowyellowyellowyellow
    </div>

在这里插入图片描述
当内容超出元素的尺寸时、那么如何获取超出元素的width值呢？？

dom.scrollWidth 获取dom的内容宽度

var oBox = document.getElementById("box");
        console.log(oBox.scrollWidth);

在这里插入图片描述

当内容超出元素的尺寸时、那么如何获取超出元素的height值呢？？

dom.scrollHeight 获取dom的内容高度

  var oBox = document.getElementById("box");
        console.log(oBox.scrollHeight);

在这里插入图片描述

当内容没有容器高、宽的时候scrollHeight和scrollWidth获取的是容器的高度和宽度

总结：
在这里插入图片描述

获取元素的位置

  #big{
            /*元素相当于整个文档（浏览器窗口）的默认位置0,0*/
            position: absolute;
         /*可以通过定位position:absolute来设置元素距离文档的位置*/
            left: 10px;/*X轴*/
            top:10px;/*Y轴*/
            width:300px;
            height: 300px;
            margin-left:20px;
            margin-top:40px;
            background-color: pink;
        }
        <div id="big"></div>

如何获取定位父级

dom.offsetParent 获取dom的定位父级

获取元素的有定位属性的父级，如果没有定位父节点，则返回body

<div id="big">
        <div id="middle"></div>
 </div>

var oBig = document.getElementById("big");
        console.log(oBig.offsetParent);

在这里插入图片描述

那么如何获取元素的位置呢？？

dom.offsetLeft 获取dom到定位父级的水平距离

var oBig = document.getElementById("big");
        console.log(oBig.offsetLeft);

在这里插入图片描述
水平距离是30=（position:absolute;left:10+margin-left:20=30）

dom.offsetTop 获取dom到定位父级的竖直距离

var oBig = document.getElementById("big");
        console.log(oBig.offsetTop);

在这里插入图片描述
竖直距离是50=（position:absolute;top:10;+margin-top:40=50）

例子：获取水平距离

	   #big{
            position: absolute;
            left: 10px;
            top:10px;
            width:300px;
            height: 300px;
            background-color: pink;
        }
        #middle{
            position: absolute;
            left: 20px;
            top: 5px;
            width:200px;
            height: 200px;
            margin-left: 20px;
            background-color: green;
        }
        <div id="big">
  	        <div id="middle"></div>
        </div>

var oMiddle = document.getElementById("middle");
        console.log(oMiddle.offsetLeft);

在这里插入图片描述
水平距离是40=（position:absolute;left:20+margin-left:20=40）是按照子元素到父元素的水平位置来计算的

如何获取：上边框的width和左边框的width值

      #middle{
            position: absolute;
            left: 30px;
            top: 30px;
            width:200px;
            height: 200px;
            border-top: 10px solid red;
            border-left: 15px solid red;
            background-color: green;
        }

dom.clientLeft 获取dom左边框的宽度

var oMiddle = document.getElementById("middle");
        console.log(oMiddle.clientLeft);

在这里插入图片描述
dom.clientTop 获取dom上边框的宽度

var oMiddle = document.getElementById("middle");
        console.log(oMiddle.clientTop);

在这里插入图片描述
怎么获取滚动的水平和垂直距离？？

      #big{
            width:100px;
            height:100px;
            background-color: pink;
            overflow: scroll;
        }
        #middle{
            width:200px;
            height: 200px;
            background-color: green;
        }

<div id="big">
        <div id="middle"></div>
    </div>

dom.scrollLeft 获取dom里面的内容的水平滚动距离

var oBig = document.getElementById("big");
        console.log(oBig.scrollLeft);

在这里插入图片描述
dom.scrollTop 获取dom里面的内容的竖直滚动距离

 var oBig = document.getElementById("big");
        console.log(oBig.scrollTop);

在这里插入图片描述

dom.scrollLeft和dom.scrollTop 获取滚动值（获取的当前的滚动位置）当设置滚动值时，该方法就会设置所有匹配元素的滚动值。当获取滚动值时，该方法只返回第一个匹配元素的滚动位置

总结：在这里插入图片描述
封装getElementPosition函数,获取元素相对于文档的坐标

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #big{
            position: absolute;
            left: 20px;
            top: 12px;
            width:200px;
            height:200px;
            margin-left: 20px;
            background-color: pink;
        }
        #middle{
            position: absolute;
            left: 20px;
            top: 20px;
            width:80px;
            height: 80px;
            margin-top: 20px;
            background-color: green;
        }
    </style>

<div id="big">
        <div id="middle"></div>
    </div>

var oBig = document.getElementById("big");
        var oMiddle = document.getElementById("middle");`在这里插入代码片`
        function getElementPosition (dom){
             if(dom.offsetParent===document.body){
                 return {
                   x:dom.offsetLeft,
                   y:dom.offsetTop
                }
             }else {
                 return{
                    x:dom.offsetLeft+getElementPosition(dom.offsetParent).x,
                    y:dom.offsetTop+getElementPosition(dom.offsetParent).y
                 }
             }
        }
        console.log(getElementPosition(oMiddle));

分析

  /*
        *       oMiddle.offsetParent === document.body
        *
        *       {
                    x:oMiddle.offsetLeft+getElementPosition(oBig).x,
                    y:oMiddle.offsetTop+getElementPosition(oBig).y
                }

                oBig.offsetParent === document.body

                {
                    x:oBig.offsetLeft,
                    y:oBig.offsetTop
                }
        *
        * */

巧克力很苦

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
脚本化CSS（行内样式表和计算样式表、获取元素的显示尺寸、获取元素的位置）

行内样式表和计算样式表这是我们在CSS中设置的样式： *{ margin:0; padding:0; } #box{ width: 200px; height: 100px; background-color: pink; }通过Js获取#box这个元素：var oBox = document.getE...
复制链接

扫一扫