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