【JavaScript】DOM之樣式操作

佐珥玎發表於2018-08-31
JavaScript

樣式操作

獲取內聯樣式

以節點和元素的方法來獲取指定的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>

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

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

設定內聯樣式

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>

判斷元素內容是否滾動到底

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

相關文章