JavaScript 之 DOM [ 样式操作 ]

头像
蔡志远
    阅读 8 分钟

    样式操作

    描述

    • 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>
    javascript
    蔡志远
    9 声望5 粉丝
    « 上一篇
    JavaScript 之 DOM [ Element对象 ]
    下一篇 »
    JavaScript 之 DOM [ 事件 ]

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.4k

    头像
    100个React最佳实践小技巧

    夕水赞 28阅读 7.3k评论 3

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.5k评论 9

    头像
    前端开发工具

    寒青赞 19阅读 5.4k

    头像
    开发插件集合

    寒青赞 14阅读 3.6k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.6k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.9k评论 3

    0 条评论
    得票最新