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