【JavaScript】DOM之样式操作

小灰灰 2023-01-23 11:58 102阅读 0赞

**样式操作**

## 获取内联样式 ##

以节点和元素的方法来获取指定的CSS样式

<body>
    <div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
    <script>
        var div = document.getElementById('q1');
    //    节点属性获取指定元素的属性
        var attrNode = div.getAttributeNode('style');
        var style = attrNode.nodeValue;
        console.log(style);
    
        var div = document.getElementById('q1');
    //    元素属性获取指定的元素的属性
        var style = div.getElementById('style');
        console.log(style);
    
    
        var div = document.getElementById('q1');
        var style = div.style;
        console.log(style.width);
    </script>
    </body>

希望能够帮助大家，另外小编谢谢大家一如既往的支持，欢迎大家一起和群里的小伙伴一起学习，交流，群里面每天都有分享初学者的笔记资料，视频。[点击进入暗号：知乎][Link 1]

## CSS StyleDeclaration对象 ##

以getPropertyVslue()方法通过elementstylestyleitem.getPropertyVslue()获取CSS样式属性值  
该属性还具有length属性

<body>
    <div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
    <script>
        var div = document.getElementById('q1');
        var style = div.style;
    //    得到CSSStyleDeclaration对象
        console.log(style.cssText);
    //    cssText属性；获取当前元素中所有的样式属性内容(字符串类型)
        console.log(style.length);
    //    length属性；获取当前元素中样式属性的个数(不等于与设置的个数一致)
        var attrName = (style.item);
        console.log(attrName);
        console.log(style.getPropertyCSSValue(attrName));
    //    getPropertyCSSValue(Name)；获取当前元素中指定属性名对应的样式属性值
    
        for (var attr in style) {
            console.log(attr);//遍历该对象
        }
    </script>
    </body>

[程序猿的生活：JS实现字体逐个打印zhuanlan.zhihu.com][JS_zhuanlan.zhihu.com]

## 获取外联样式表 ##

以styleSheets属性，该属性返回所有包含外联样式表返回包括内嵌样式表合外联样式表的集合

<head>
        <meta charset="UTF-8">
        <title>获取外联样式</title>
        <link rel="stylesheet" href="style.css">
        <style>
            .q1{
               width:200px;
               height: 200px;
               background-color: blue;
            }
        </style>
    </head>
    <body>
    <div class="d1"></div>
    <div class="d2"></div>
    <script>
        var stylSheetList = document.styleSheets;
    //    获取当前所有页面的样式表
    //    并返回StyleSheetList对象(类数组对象)
        console.log(document.styleSheets);
        var styleSheet = styleSheetList[0];
    /*
    * type属性 - 表示当前使用的是CSS样式
      href属性 - 表示当前样式表的路径
      cssRules/rules属性 - 表示当前样式表中所有的样式规则
     */
        console.log(styleSheet);
    
        var cssRuleList = styleSheet.rules;
        console.log(cssRuleList);
    //     表示当前样式表中的所有规则集合(类数组对象)
    
        var styleDecl = cssStyleRule.style;
        console.log(styleDecl);
    </script>
    </body>

## 获取class属性 ##

以className属性来获取页面中元素的class属性值，Element对象该属性不是个class属性值可获取页面中元素的class属性值的列表

以classList属性来获取页面中元素的class属性值，在页面中元素的class属性值为多个样式，该属性可获取页面中元素的class属性值的列表

## 获取当前有效样式 ##

以Window对象表示在getComputedStyle()方法来获取元素当前有效样式，并带有浏览器的兼容问题

[程序猿的生活：我从来不理解JavaScript闭包，直到有人这样向我解释它…zhuanlan.zhihu.com][JavaScript_zhuanlan.zhihu.com]

## 设置内联样式 ##

style属性；通过页面元素的style属性实现  
setAttirbute（）方法；通过style属性设置，还可调用以elementsetAttribute()方法实现

<body>
    <div id="q1" style="width: 200px;height: 200px;border: 1px solid black"></div>
    <script>
        var div = document.getElementById('q1');
        div.setAttribute('style','width: 400px;height: 400px;border: 1px solid black');
        var div = document.getElementById('q1');
        var style = div.style;
        style.width ='600px';
        style.height = '600px';
    </script>
    </body>

## Element对象的样式属性 ##

## 元素内部的宽度和高度 ##

以Element对象的clientWidth和clientheiht来设置内部的宽度和高度

## 内容区的宽度和高度 ##

以Element对象的scrollWidth和scrollheiht来设置内容区的宽度和高度

## 滚动条滚动的宽度和高度 ##

以Element对象的scrolleft属性来设置滚动条到元素的距离

[程序猿的生活：js浮点数加减乘除zhuanlan.zhihu.com][js_zhuanlan.zhihu.com]

## 判断元素内容是否滚动到底 ##

以Element对象的scrollTop属性来设置滚动条到元素顶部的距离

获取指定元素的定位父元素  
以Element对象的scrollheight，scrolltop，和clientheight来判断是否滚到底

[Link 1]: https://link.zhihu.com/?target=https%3A//jq.qq.com/%3F_wv%3D1027%26k%3DnKNuXAFr
[JS_zhuanlan.zhihu.com]: https://zhuanlan.zhihu.com/p/389377058
[JavaScript_zhuanlan.zhihu.com]: https://zhuanlan.zhihu.com/p/388950268
[js_zhuanlan.zhihu.com]: https://zhuanlan.zhihu.com/p/388205996