【JavaScript】DOM之样式操作-蒲公英云

样式操作

获取内联样式

以节点和元素的方法来获取指定的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>

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

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

获取外联样式表

以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属性值的列表

<style>
        .q1 {
           width:200px;
           height: 200px;
           background-color: blue;
        }
        .q2 {
           font-family: 新宋体;
           color: darkgray;
        }
        .two {
           width: 200px;
           height: 200px;
           background-color: blue;
        }
    </style>
</head>
<body>
<div id="q1" class="q1 q2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem delectus dolores enim ex iusto non optio quibusdam! A animi minima nisi repudiandae rerum voluptas! At cumque iste nulla quasi.</div>
<script>
    var div = document.getElementById('q1');
    var className = div.className;
//    DOM中的对象的className属性并得到class属性值
    console.log(className);
    // div.className = 'two';
    var attr = div.getAttribute('class');
    console.log(attr);
    // div.setAttribute('class','two');
    var classList = div.classList;
//    classList属性(浏览器兼容问题)
    console.log(classList);
</script>
</body>

获取当前有效样式

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

<style>
        .q1 {
            color: blue;
            font-family: 新宋体;
        }
    </style>
</head>
<body>
<div id="q1" style="width: 200px;height: 200px;background-color: red;" class="q1">火影忍者</div>
<script>
    var div = document.getElementById('q1');
    var style = div.currentStyle;
    console.log(style);
//    在window对象的getComputedStyle(element)
//    element是指定元素
//    * 返回值为CSSStyleDeclaration对象
//    * 此方法仅用于获取，不能用于设置
    function getStyle(element) {
        if(element.getComputedStyle){
           return window.getComputedStyle(element);
//           具有兼容问题
        } else {
           return element.currentStyle;
        }
    }
</script>
</body>

程序猿的生活：我从来不理解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来设置内部的宽度和高度

<style>
        #q1{
           width: 200px;
           height: 200px;
           border: 10px solid black;
           box-sizing: border-box;
        }
    </style>
</head>
<body>
<script>
    var div = document.getElementById('q1');
    console.log(div.clientWidth, div.clientHeight);
//    内容区 + 内边距；只能获取，不能设置
</script>
</body>

内容区的宽度和高度

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

<style>
        #fu{
           width: 200px;
           height: 200px;
           background-color: red;
           overflow: auto;
        }
        #zi{
           width: 400px;
           height: 400px;
           background-color: blue;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
</div>
<script>
    var fu = document.getElementById('fu');
    console.log(fu.scrollWidth, fu.scrollHeight);
</script>
</body>

滚动条滚动的宽度和高度

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

<style>
        #fu{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: auto;
        }
        #zi{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
</div>
<script>
    var fu = document.getElementById('fu');
    parent.onscroll = function () {
        console.log(fu.scrollLeft, fu.scrollTop);
    }
</script>
</body>

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

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

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

<style>
        #fu{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: auto;
        }
        #zi{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto distinctio ex expedita fugiat harum iusto maxime minus mollitia nesciunt praesentium quae quas, qui quisquam sint sunt ullam vitae voluptate voluptatem?</div>
</div>
<script>
    var fu = document.getElementById('fu');
    fu.onscroll = function () {
        console.log(fu.clientHeight, fu.scrollHeight, fu.scrollTop);
    }
</script>
</body>

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

<style>
        #fu{
           position: relative;
        }
        #zz{
           position: relative;
        }
        #q1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="fu">
    <div id="zi"></div>
    </div>
<script>
    var q1 = document.getElementById('q1');
    /*
        1.如果当前元素的所有祖先元素都没有开启定位的话 - <body>元素
        2.如果当前元素的所有祖先元素中，只能一个开启定位的话 - 开启定位的祖先元素
        3.如果当前元素的所有祖先元素中，具有多个开启定位的话 - 距离当前元素最近的那个祖先元素
     */
    console.log(q1.offsetParent);