JavaScript 之 DOM [ 款式操纵 ]

2023年4月1日 151次阅读 来源: 蔡志远

款式操纵

形貌

  • JavaScript 能够经由过程 DOM 对 CSS 的款式举行操纵

元素属性操纵

  • Element对象能够对属性举行操纵

    • getAttribute：示意猎取指定元素的属性值
    • setAttribute：示意对指定元素举行增加属性 – 先写属性名，在写属性值
    • removeAttribute：示意对指定元素的指定属性举行删除
<body>
<div id="d1">
    <p>手机</p>
    <p id="p2">腕表</p>
    <p>电脑</p>
</div>
<script>
    /*
        Element对象也能够对属性举行操纵
        getAttribute：示意猎取指定元素的属性值
        setAttribute：示意对指定元素举行增加属性 - 先写属性名，在写属性值
        removeAttribute：示意对指定元素的指定属性举行删除
     */
    /* 先定位指定元素的位置 */
    var p = document.getElementById( 'p2' );
    console.log( p );
    /* 猎取指定元素的属性值 */
    var ps = p.getAttribute( 'id' );
    console.log( ps );
    /* 对指定元素增加属性 - 再增加时，先写属性名在写属性值 */
    p.setAttribute( 'title', '123' );
    /* 对指定元素删除属性 */
    p.removeAttribute( 'title' );
</script>
</body>

猎取内联款式

经由过程节点体式格局猎取指定目的的CSS款式

<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
    /* 经由过程节点体式格局猎取指定目的的CSS款式 */
    /* 定位指定元素节点 */
    var div = document.getElementById( 'd' );
    /* 猎取指定元素节点的属性节点 */
    var shuxing = div.getAttributeNode( 'style' );
    console.log( shuxing );// 显现 style="width: 200px; height: 200px; border: 1px solid black"
    /* 猎取指定属性节点的属性值 */
    var style = shuxing.nodeValue;
    console.log( style );// 显现 width: 200px; height: 200px; border: 1px solid black
</script>
</body>

经由过程元素体式格局猎取指定目的的CSS款式

<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
    /* 经由过程元素体式格局猎取指定目的的CSS款式 */
    /* 定位指定元素 */
    var div = document.getElementById( 'd' );
    /* 猎取指定元素的属性 */
    var style = div.getAttribute( 'style' );
    console.log( style );// 显现 width: 200px; height: 200px; border: 1px solid black
</script>
</body>

经由过程HTMLElement对象猎取指定目的的CSS款式

  • 在DOM中HTMLElement对象供应了style属性

    • 该属性会返回一个对象 – CSSStyleDeclaration对象
    • CSSStyleDeclaration对象封装了一切CSS的款式
<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
    /*
        在DOM中HTMLElement对象供应了style属性
         * 该属性会返回一个对象 - CSSStyleDeclaration对象
         * CSSStyleDeclaration对象封装了一切CSS的款式
     */
    /* 定位指定元素 */
    var div = document.getElementById( 'd' );
    /* 猎取指定元素的属性款式 */
    var style = div.style;
    console.log( style );// 显现 CSSStyleDeclaration{... ...}
    /* 猎取指定属性的属性值 */
    console.log( style.width );// 显现 200px
</script>
</body>

猎取外联款式

<head>
    <meta charset="UTF-8">
    <title>猎取外联款式</title>
    <style>
        #p1 {
            color: red;
        }
    </style>
</head>
<body>
<p id="p1">我特啊呦赌赢</p>
<script>
    /* 能够先定位<style>标签的位置 */
    var p1 = document.getElementsByTagName( 'style' )[0];
    console.log( p1.textContent );
    /*
         Document对象供应了styleSheets属性
         会获得StyleSheetList对象（StyleSheetList对象中包含了CSSStyleSheet对象）
     */
    var p2 = document.styleSheets;
    console.log( p2 );
    /*
        会获得CSSStyleSheet对象
        该对象供应了一切的CSS款式（cssRules）
     */
    var p3 = p2[0];
    console.log( p3 );
    /*
        会获得CSSRuleList对象
        该对像示意存储了当前外联款式的一切css款式（CSSStyleRule）
     */
    var p4 = p3.cssRules;
    console.log( p4 );
    /*
        CSSStyleRule对象：
        cssText - 获得CSS款式内容以字符串情势示意
        selectorText - 获得CSS款式的选择器
        style - 获得CSSStyleDeclaration对象
     */
    var p5 = p4[0];
    console.log( p5 );

</script>
</body>
</html>

猎取当前有用款式

  • 猎取当前有用款式要注重款式的优先级别

window.getComputedStyle()

  • 能够猎取指定元素的当前有用款式（有浏览器兼容问题）

currentStyle

  • 能够作用在IE8版本的浏览器
<body>
<p id="p1" style="color: red">啊啊啊啊啊啊</p>
<script>
    /*
        猎取当前有用款式 - 注重款式的优先级别
        window.getComputedStyle()：能够猎取指定元素的当前有用款式（有浏览器兼容问题）
        currentStyle：能够作用在IE8版本的浏览器
     */
    var p = document.getElementById( 'p1' );
    /* 猎取指定元素的当前有用款式 */
    var p1 = window.getComputedStyle( p );
    console.log( p1.color );
    var p2 = p.currentStyle;
    /* 处理兼容问题 */
    if ( window.getComputedStyle ) {
        var p1 = window.getComputedStyle( p );
        console.log( p1.color );
    } else {
        var p2 = p.currentStyle;
        console.log( p2.color );
    }
</script>
</body>

设置内联款式

经由过程Element对象对属性举行设置

<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
    /* 经由过程Element对象对属性举行设置 */
    /* 定位指定元素 */
    var div = document.getElementById( 'd' );
    /* 经由过程setAttribute属性对指定元素的属性举行设置 */
    div.setAttribute('style','width: 400px;height: 400px;border: 1px solid black');
</script>
</body>

经由过程HTMLElement对象对属性举行设置

<body>
<div id="d" style="width: 200px; height: 200px; border: 1px solid black"></div>
<script>
    /* 经由过程HTMLElement对象对属性举行设置 */
    /* 定位指定元素 */
    var div = document.getElementById( 'd' );
    /* 经由过程style属性对指定元素的属性举行设置 */
    var style = div.style;
    style.width = '600px';
</script>
</body>

class属性

Element对象class属性

  • 能够用来猎取指定元素的属性，也能够对指定元素举行设置
<head>
    <meta charset="UTF-8">
    <title>class属性的操纵</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div id="d" class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, asperiores delectus deleniti dicta eligendi exercitationem, fuga ipsa ipsam minus neque nihil non officiis provident, quidem quis reprehenderit velit vitae.</div>
<script>
    /* 定位指定元素 */
    var div = document.getElementById( 'd' );
    /* 经由过程Element对象供应的方法来对class属性举行设置 */
    /* 猎取指定元素的class属性 */
    var attr = div.getAttribute('class');
    console.log(attr);
    /* 对class属性举行设置 */
    div.setAttribute('class','d2');
</script>
</body>

className属性

<head>
    <meta charset="UTF-8">
    <title>class属性的操纵</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        .d2 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div id="d" class="d1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad, asperiores delectus deleniti dicta eligendi exercitationem, fuga ipsa ipsam minus neque nihil non officiis provident, quidem quis reprehenderit velit vitae.</div>
<script>
/* 定位指定元素 */
    var div = document.getElementById( 'd' );
    /* 经由过程className来猎取指定元素的class属性 */
    var className = div.className;
    console.log( className );// 显现 d1(class属性值)
    /* 转变class的属性值 */
    div.className = 'd2';
</script>
</body>

classList属性

<head>
    <meta charset="UTF-8">
    <title>class属性</title>
    <style>
        .p1 {
            color: red;
        }
        .p2 {
            background-color: silver;
        }
        .p3 {
            color: green;
        }
    </style>
</head>
<body>
<p class="p1">我特啊呦赌赢</p>
<script>
    /*
        能够经由过程classList属性和以下方法来对指定元素的设置
         add()：示意增加指定属性值
         remove()：示意删除指定属性值
         toggle()：示意切换指定的属性值
         contains()：示意检测指定属性值是不是存在 - 存在为true，不存在为false
     */
    var ps = p.classList;
    console.log( ps );
    ps.add( 'p2' );
    ps.remove( 'p1' );
    ps.toggle( 'p3' );
    ps.contains( 'p2' )

</script>
</body>

猎取宽和高

  • 能够分为：猎取元素的宽和高、猎取内容区的宽和高、猎取转动部份的宽和高
<head>
    <meta charset="UTF-8">
    <title>猎取宽和高</title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 50px;
            margin: 50px;
            border: 20px solid black;
            overflow: auto;
        }
        #d2 {
            width: 500px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
<script>
    /*
        猎取元素的宽度和高度

        元素的宽和高（内边距加内容区）：
        宽度 clientWidth = css款式的宽度 + 内边距（双方） - 转动条的宽度
        高度 clientHeight = css款式的高度 + 内边距（双方） - 转动条的高度

        内容区的宽和高：
        宽度 scrollWidth = 内容的宽度 + 内边距（单边）
        高度 scrollHeight = 内容的高度 + 内边距（单边、设置内容溢出是双方）

        转动部份的宽和高 - 内容的宽高超越元素的宽高
        宽度 scrollLeft = 内容的宽度 - 元素的宽度
        高度 scrollTop = 内容的高度 - 元素的高度
     */
    /* 定位指定元素的位置 */
    var d = document.getElementById( 'd1' );
    console.log( d );
   
    /* 猎取指定元素的宽和高 */
    console.log( d.clientWidth, d.clientHeight );
   
    /* 猎取指定元素中内容区的宽和高 */
    console.log( d.scrollWidth, d.scrollHeight );
   
    /* 猎取指定元素转动条的转动部份的宽和高 */
    console.log( d.scrollLeft, d.scrollTop );
   
    /* 经由过程鼠标事宜来猎取动态值 */
    d.onscroll = function () {
        console.log( d.scrollLeft, d.scrollTop );
    }
</script>
</body>
    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016216853
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞