DOM操作CSS样式设定

最新推荐文章于 2024-08-11 00:22:53 发布

大聪明码农徐

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量1k

点赞数 3

分类专栏： JavaScript基础文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45799465/article/details/122763692

版权

JavaScript基础专栏收录该内容

34 篇文章 18 订阅

订阅专栏

标签对象.style.属性 = 属性值，只能获取行内样式

注意：

JavaScript中 - 只作为减号使用。

css属性中带有 - 的属性必须写成小驼峰命名法 font-size ---- fontSize margin-top ---- marginTop。

如果需要单位必须要携带单位不能光写数字需要区分css样式和属性。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
<body>
    <div style="width: 50px;">你好</div>
    <script>
        const oDiv = document.querySelector('div');
        // 只能获取到宽，获取不到高。
        var wid = oDiv.style.width ;
        var hei = oDiv.style.height;
        console.log(wid,hei);
        // - 只做减号使用 
        // css属性中带有 - 的属性 必须写成小驼峰命名法，
        // 如果需要单位 必须要 携带单位 不能光写数字需要区分css样式和属性。
        oDiv.style.fontSize = 40+"px";
    </script>
</body>

运行结果：

var 变量 = window.getComputedStyle( 标签对象 ).属性 ; 可以获取任意语法设定的css样式。

注意：

获取结果如果带有px等单位可以通过 parseInt() 获取整数部分。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
<body>
    <div style="width: 50px;">你好</div>
    <script>
        const oDiv = document.querySelector('div');
        // 可以获取任意语法设定的css样式。
        // 通过 parseInt() 获取整数部分。
        var Height = parseInt(window.getComputedStyle(oDiv).height) ;
        console.log(Height);
    </script>

运行结果：