js基础——操作内联样式

最新推荐文章于 2024-05-12 06:22:46 发布

jwz934738949

最新推荐文章于 2024-05-12 06:22:46 发布

阅读量1.3k

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/100546199

版权

javascript基础专栏收录该内容

36 篇文章 1 订阅

订阅专栏

通过JS修改元素的样式

语法：元素.style.属性 = 属性值（属性值需要加双引号）

当CSS样式中含有-的，在JS中不能直接表示，需要使用驼峰命名法。即去掉-，将后面的首字母大写。

例如：background-color变为backgroundColor。

在CSS样式中如果设置了!important属性后，JS就无法对CSS样式进行修改。

通过style设置和读取的都是内联样式，无法读取内联表中的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作内联样式</title>
    <style>
        #b1 {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: yellow;
        }
    </style>
    <script>
        window.onload = function () {
            var box = document.getElementById("b1");
            var button = document.getElementById("bu1");
            button.onclick = function () {
                box.style.width = "100px";
                box.style.backgroundColor = "red";
                box.style.border = "1px dashed #fff";
            }
        }
    </script>
</head>
<body>
<div id="b1"></div>
<button id="bu1">点击改变样式</button>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础——操作内联样式

通过JS修改元素的样式语法：元素.style.属性 = 属性值（属性值需要加双引号）当CSS样式中含有-的，在JS中不能直接表示，需要使用驼峰命名法。即去掉-，将后面的首字母大写。例如：background-color变为backgroundColor。在CSS样式中如果设置了!important属性后，JS就无法对CSS样式进行修改。通过style设置和读取的都是内联样式，无...
复制链接

扫一扫