DOM编程系列之样式操作个人分享

最新推荐文章于 2024-09-15 14:50:06 发布

weixin_34294649

最新推荐文章于 2024-09-15 14:50:06 发布

阅读量101

点赞数

文章标签：操作系统

原文链接：https://segmentfault.com/a/1190000016217097

版权

样式操作

获取内联样式

备注:获取对应的标签,标签里的值然后点一个属性就能得到一个关健对象,对象里封装了CSS样式属性的所有内容,然后通过对对象操作就可以获取或者设置相对应的样式内容.
style属性是指定元素的属性 - 通过属性操作完成

示例代码:

<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 = {
```
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属性键值对的集合
属性或方法:
- cssText属性 - 声明块的文本内容
- length属性 - 属性的数量
- item()方法 - 返回属性名
- getPropertyValue()方法 - 返回属性值

示例代码:

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

示例代码:

   <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版本的浏览器

示例代码:

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

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

如果当前元素的所有祖先元素都没有开启定位的话 - <body>元素
如果当前元素的所有祖先元素中，只能一个开启定位的话 - 开启定位的祖先元素
如果当前元素的所有祖先元素中，具有多个开启定位的话 - 距离当前元素最近的那个祖先元素

示例代码:

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

weixin_34294649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫