DOM操作元素-样式属性操作

最新推荐文章于 2025-11-06 10:08:38 发布

原创

最新推荐文章于 2025-11-06 10:08:38 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #es6 #java

文章介绍了如何使用JavaScript修改HTML元素的样式，包括通过element.style进行行内样式操作，如改变背景颜色和宽度，以及通过element.className进行类名样式操作，实现元素的显示与隐藏、文本框内容的显示隐藏以及密码格式的错误提示。此外，文章还提供了多个示例代码来说明这些操作的用法。

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

element.style 行内样式操作

element.className 类名样式操作

一、element.style 行内样式操作

使用element.style 获得修改元素的样式。更改的结果会变为行内样式。

使用方法为：要修改的元素.element.style.想要更改的样式 = ‘更改的样式’

注意：

JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor

JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

例1:运用element.style 行内样式操作更改div点击前和点击后的样式。

要求：当点击了div之后，div背景颜色由黄绿色变为粉色，并且宽度增加为250px；

css

        div {
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }

html & js

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            div.style.backgroundColor = 'pink';//this.style.backgroundColor = 'pink';//更改点击后的背景颜色
            div.style.width = '250px';//this.style.width = '250px';//更改点击后的宽度
        }
    </script>
</body>