【JavaScript】DOM之样式操做

时间 2019-12-06

原文原文链接

样式操做css

获取内联样式

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

<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>

CSSStyleDeclaration对象

以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>

获取外联样式表

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

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

<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>

设置内联样式

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

<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来设置内部的宽度和高度ci

<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来设置内容区的宽度和高度element

<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>

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

以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);
</script>
</body>