DOM編程系列之樣式操做我的分享

時間  2020-04-20
標籤 dom 編程 系列 樣式 我的 分享 欄目 HTML 简体版
原文   原文鏈接

樣式操做

獲取內聯樣式

  • 備註:獲取對應的標籤,標籤裏的值而後點一個屬性就能獲得一個關健對象,對象裏封裝了CSS樣式屬性的全部內容,而後經過對對象操做就能夠獲取或者設置相對應的樣式內容.
  • style屬性是指定元素的屬性 - 經過屬性操做完成

示例代碼:css

<body>
<div id="d1" style="width: 200px; height: 200px;border: 10px solid black"></div>
<script>
    // style屬性是指定元素的屬性 - 經過屬性操做完成
    // 1. 節點方式
    // 經過指定ID屬性獲取元素節點
    var div = document.getElementById('d1');
    // 經過指定元素獲取去指定元素的屬性節點
    var attrNode = div.getAttributeNode('style');
    // 獲取指定屬性的節點值
    var style = attrNode.nodeValue;
    console.log(style);

    // 2. 元素方式
    // 經過指定屬性獲取元素節點
    var div = document.getElementById('d1');
    // 經過指定元素獲取去指定元素的屬性
    var style = div.getAttribute('style');
    console.log(style);

    /*
        DOM中HTMLElement對象提供了style屬性
          * 返回CSSStyleDeclaration對象
            * DOM對應CSS中全部樣式屬性提供的對象(封裝了全部樣式屬性)
          * 獲得樣式屬性對應的值 - 字符串類型(將其轉換爲Number類型)
     */
    // 經過ID屬性獲取指定元素節點
    var div = document.getElementById('d1');
    // 獲取指定元素的屬性樣式
    var style = div.style;
    // 調用指定屬性樣式的屬性值
    console.log(style.width);
</script>
</body>

設置內聯屬性

  • 注意 - DOM不容許重寫DOM中的對象
    /*style = {node

    width : '700px',
height : '700px'

    }*/數組

示例代碼:瀏覽器

<body>
<div id="d1" style="width: 200px; height: 200px;border: 1px solid black"></div>
<script>
    /* 經過ID屬性獲取指定元素節點 */
    var div = document.getElementById('d1');
    /* 經過setAttribute屬性設置指定的元素屬性 */
    div.setAttribute('style','width: 400px; height: 400px; border: 1px solid black');

    // 利用HTMLElement對象的style屬性
    var div = document.getElementById('d1');
    // 獲取指定元素的屬性樣式
    var style = div.style;
    style.width = '800px';
    style.height = '800px';

    // 注意 - DOM不容許重寫DOM中的對象
    /*style = {
        width : '700px',
        height : '700px'
    }*/
</script>
</body>

CSSStyleDeclaration對象

  • 經過element.style返回的是CSSStyleDeclaration對象.CSSStyleDeclaration對象表示一個CSS屬性鍵值對的集合

  • 屬性或方法:ui

    • cssText屬性 - 聲明塊的文本內容
    • length屬性 - 屬性的數量
    • item()方法 - 返回屬性名
    • getPropertyValue()方法 - 返回屬性值

示例代碼:code

<body>
<div id="d1" style="width: 200px; height: 200px;border: 1px solid black"></div>
<script>
    var div = document.getElementById('d1');
    // 獲得的是CSSStyleDeclaration對象
    var style = div.style;

    // cssText屬性 = 獲取當前元素中全部的樣式屬性內容(字符串類型
    console.log(style.cssText);// 調用結果 width: 200px; height: 200px; border: 1px solid black;
    // length屬性 - 獲取當前元素中樣式屬性的個數(不必定與設置的個數一致)
    console.log(style.length);// 調用結果爲 19
    // item(index)方法 - 獲取當前元素中指定位置的樣式屬性
    var attrName = style.item(1);
    console.log(attrName);// 調用結果爲 height
    // getPropertyValue(name)方法 - 獲取當前元素中指定屬性名對應的樣式屬性值
    console.log(style.getPropertyValue(attrName));// 調用結果 200px

    // 遍歷對象
    for (var attr in style) {
        console.log(attr);
    }
</script>
</body>

獲取外聯樣式表

示例代碼:對象

<style>
        .d2{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<script>
    /* 內嵌樣式表 -> 獲取<style>元素
      var styleElement = document.getElementsByTagName('style')[0];
      var style = styleElement.textContent;
      console.log(style);
      */

    /*
        Document對象提供了styleSheets屬性
        * 做用 - 獲取當前HTML頁面中全部的樣式表
        * 返回 - StyleSheetList對象(類數組對象)
     */
    var stylSheetList = document.styleSheets;
    console.log(document.styleSheets);
    /*
        CSSStyleSheet對象
        * 做用 - 表示某個指定的樣式表
        * 屬性
          * type屬性 - 表示當前使用的是CSS樣式
          * href屬性 - 表示當前樣式表的路徑
          * cssRules/rules屬性 - 表示當前樣式表中全部的樣式規則
     */
    var styleSheet = stylSheetList[0];
    console.log(styleSheet);
    /*
        CSSRuleList對象
        * 做用 - 表示當前樣式表中的全部規則集合(類數組對象)
     */
    var cssRuleList = styleSheet.rules;
    console.log(cssRuleList);
    /*
        CSSStyleRule對象
        * 做用 - 表示當前樣式表中指定的樣式規則
        * 屬性
          * cssText屬性 - 表示當前樣式規則的字符串內容
          * style屬性 - 表示當前樣式規則(CSSStyleDeclaration對象)
     */
    var cssStyleRule = cssRuleList[0];
    console.log(cssStyleRule);

    var styleDecl = cssStyleRule.style;
    console.log(styleDecl.width);

    /*
        DOM中提供有關外聯樣式的獲取與設置
        * 操做性比較複雜
        * 操做時容易出錯
        實際狀況：
        1.頁面總體樣式風格改變 -> 經過<link>元素的href屬性的值的修改(修改引入的CSS文件)
        2.頁面局部樣式風格改變 -> 內聯樣式的優先級別高於外聯樣式的特色(經過內聯樣式覆蓋外聯樣式)
     */
</script>
</body>

獲取class屬性

className屬性

示例代碼:事件

<style>
        .d1{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
    </style>
</head>
<body>
<div id="d1" class="d1 d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa delectus dignissimos earum eius maxime mollitia necessitatibus nostrum officiis sequi totam! Eligendi eos facere itaque laborum, maiores minus non tempora unde!</div>
<script>
    var div = document.getElementById('d1');
    // DOM中某個對象提供了className屬性 - 獲得class屬性的值
    var className = div.className;
    console.log(className);// 調用結果爲 d1 d2
</script>
</body>

classList屬性

示例代碼:ip

<style>
        .d1{
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
    </style>
</head>
<body>
<div id="d1" class="d1 d2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa delectus dignissimos earum eius maxime mollitia necessitatibus nostrum officiis sequi totam! Eligendi eos facere itaque laborum, maiores minus non tempora unde!</div>
<script>
    // classList屬性(瀏覽器兼容問題) - 獲取多個類選擇器疊加的用法
    var classList = div.classList;
    console.log(classList);// 調用結果爲 DOMTokenList(2) ["d1", "d2", value: "d1 d2"]
</script>
</body>

獲取有效樣式

  • 獲取當前有效樣式要注意樣式的優先級別
  • window.getComputedStyle()：能夠獲取指定元素的當前有效樣式（有瀏覽器兼容問題)
  • currentStyle：能夠做用在IE8版本的瀏覽器

示例代碼:ci

<style>
        .d1 {
            color: cyan;
            font-family: 宋體;
        }
    </style>
</head>
<body>
<div id="d1" style="width: 200px;height: 200px;background-color: #b0b0b0;" class="d1">一花一世界</div>
<script>
    /*
        Window對象的getComputedStyle(element)方法
        * 做用 - 獲取指定元素的當前有效樣式內容
        * 參數
          * element - 指定的元素
        * 返回值 - CSSStyleDeclaration對象
        * 注意 - 該方法僅用於獲取，不能用於設置
     */
    var div = document.getElementById('d1');
    var style = window.getComputedStyle(div);
    console.log(style);

    /*
        getComputedStyle(element)方法具備瀏覽器兼容問題
        * IE 8如下瀏覽器不支持 - 提供currentStyle屬性
     */
   /* var style = div.currentStyle;
    console.log(style);

    function getStyle(element){
        if (element.getComputedStyle) {
            return window.getComputedStyle(element);
        } else {
            return element.currentStyle;
        }
    }*/

</script>
</body>

獲取元素內部的寬度和高度

  • 注意: 只能獲取，不能設置
  • 元素內部 = 內容區 + 內邊距

示例代碼:

<style>
        #d1 {
            width: 200px;
            height: 200px;
            border: 10px solid black;
            padding: 50px;

            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<script>
    var div = document.getElementById('d1');
    // 只能獲取，不能設置 -> 元素內部 = 內容區 + 內邊距
    console.log(div.clientWidth, div.clientHeight);

</script>
</body>

獲取內容區的寬度和高度

示例代碼:

<style>
        #parent {
            width: 200px;
            height: 200px;
            border: 10px solid black;

            overflow: auto;
        }
        #child {
            width: 400px;
            height: 400px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child"></div>
</div>
<script>
    // 經過指定屬性獲取元素節點
    var parent = document.getElementById('parent');
    // 獲取滾動的高度和寬度
    console.log(parent.scrollWidth, parent.scrollHeight);// 調用結果爲 400 400

</script>
</body>

獲取滾動條滾動的距離

  • 滾動條滾動事件

    • onwheel事件
    • onmousewheel事件
    • onscroll事件

示例代碼:

<style>
        #parent {
            width: 200px;
            height: 200px;
            border: 10px solid black;

            overflow: auto;
        }
        #child {
            width: 400px;
            height: 400px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child"></div>
</div>
<script>
    var parent = document.getElementById('parent');
    /*
        滾動條滾動事件
        * onwheel事件
        * onmousewheel事件
        * onscroll事件
     */
    parent.onscroll = function(){
        console.log(parent.scrollLeft, parent.scrollTop);
    }


</script>
</body>

判斷是否滾動到底部

  • 用於判斷滾動條是否滾動到底部

    • parent.clientHeight + parent.scrollTop === parent.scrollHeight

示例代碼:

<style>
        #parent {
            width: 400px;
            height: 600px;
            border: 10px solid black;

            overflow: auto;
        }
        #child {
            width: 380px;
            height: 1000px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">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 parent = document.getElementById('parent');
    parent.onscroll = function(){
        /*
            用於判斷滾動條是否滾動到底部
            parent.clientHeight + parent.scrollTop === parent.scrollHeight
          */
        console.log(parent.clientHeight, parent.scrollHeight, parent.scrollTop);
    }

</script>
</body>

獲取指定元素的定位父元素

  1. 若是當前元素的全部祖先元素都沒有開啓定位的話 - <body>元素
  2. 若是當前元素的全部祖先元素中，只能一個開啓定位的話 - 開啓定位的祖先元素
  3. 若是當前元素的全部祖先元素中，具備多個開啓定位的話 - 距離當前元素最近的那個祖先元素

示例代碼:

<style>
        #parent {
            position: relative;
        }
        #child {
            position: relative;
        }
        #d1 {
            width: 100px;
            height: 100px;
            background-color: #ee2222;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        <div id="d1"></div>
    </div>
</div>
<script>
    var d1 = document.getElementById('d1');
    /*
        1.若是當前元素的全部祖先元素都沒有開啓定位的話 - <body>元素
        2.若是當前元素的全部祖先元素中，只能一個開啓定位的話 - 開啓定位的祖先元素
        3.若是當前元素的全部祖先元素中，具備多個開啓定位的話 - 距離當前元素最近的那個祖先元素
     */
    console.log(d1.offsetParent);
</script>
</body>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程