JS对元素样式的操作以及JS的事件_js更改完样式后不可修改-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72527416/article/details/128635322

文章介绍了如何通过JavaScript操作HTML元素的内联样式，包括使用js修改样式时需遵循的驼峰命名规则，以及内联样式的高优先级特性。同时，提到了内联样式与`!important`结合时可能导致的样式覆盖问题。此外，还提及了JS事件处理程序的三个阶段：捕获阶段、目标阶段和冒泡阶段，强调了这些概念对于理解和调试JavaScript代码的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对元素样式进行操作

操作内联样式

通过js修改元素的样式:语法:元素.style.样式名=样式值

需要将这种样式改成驼峰命名法
去掉-,然后将-后的字母大写
我们通过style属性设置的样式都是内联样式而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
如果在样式中写了!important,则设置的样式会有最高的优先即使通过js也不能覆盖样式,此时会导致js修改的样式失效

<style>
        #box1 {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
    <script>
        window.onload = function () {
            /*
             * 点击按钮以后,修改box1的大小
             * 
             * 
             * 
             */
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //修改box1的宽度
                /*
                 * 通过js修改元素的样式
                 *  语法:元素.style.样式名=样式值
                 *      这种名称在js中是不合法的比如background-color
                 *      需要将这种样式改成驼峰命名法
                 *      去掉-,然后将-后的字母大写
                 * 
                 *  我们通过style属性设置的样式都是内联样式
                 *  而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
                 *
                 *  但是如果在样式中写了!important,则设置的样式会有最高的优先级
                 *  即使通过js也不能覆盖样式,此时会导致js修改的样式失效
                 *  所以尽量不要为样式加!important
                 */
                box1.style.width = "300px";//要是字符串""

            };
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //读取box1的样式
                /*
                 * 通过style属性设置和读取的都是内联样式
                 * 无法读取样式表(style)中的样式
                 * 
                 * 
                 */
                alert(box1.style.width);
            };
        }
    </script>
</head>

<body>
    <div id="box1"></div>
    <button id="btn01">点我一下</button>
    <button id="btn02

对元素样式进行操作

1.操作内联样式

通过js修改元素的样式:语法:元素.style.样式名=样式值

<style>
        #box1 {
            width: 200px;
            height: 200px;
            background: skyblue;
        }
    </style>
    <script>
        window.onload = function () {
            /*
             * 点击按钮以后,修改box1的大小
             * 
             * 
             * 
             */
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //修改box1的宽度
                /*
                 * 通过js修改元素的样式
                 *  语法:元素.style.样式名=样式值
                 *      这种名称在js中是不合法的比如background-color
                 *      需要将这种样式改成驼峰命名法
                 *      去掉-,然后将-后的字母大写
                 * 
                 *  我们通过style属性设置的样式都是内联样式
                 *  而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
                 *
                 *  但是如果在样式中写了!important,则设置的样式会有最高的优先级
                 *  即使通过js也不能覆盖样式,此时会导致js修改的样式失效
                 *  所以尽量不要为样式加!important
                 */
                box1.style.width = "300px";//要是字符串""

            };
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //读取box1的样式
                /*
                 * 通过style属性设置和读取的都是内联样式
                 * 无法读取样式表(style)中的样式
                 * 
                 * 
                 */
                alert(box1.style.width);
            };
        }
    </script>
</head>

<body>
    <div id="box1"></div>
    <button id="btn01">点我一下</button>
    <button id="btn02

一、JS的三种使用方式

　　　　　　1、html标签中内嵌JS(不提倡使用。)
               <button οnclick="javascript:alert('你真点啊。')" > 有本事点我呀！！！！</button>

               2、HTML页面中直接使用JS：
               <script type="text/javascript">
                   //js代码
               </script>

               3、引用外部JS文件：
               <script language="javascript" src="Js文件路径">
               </script>

理解JS事件处理程序中的三个阶段：捕获阶段、处于目标阶段、事件冒泡阶段

注意：所有图片及代码来自《JavaScript高级程序设计》，为了能用具体的例子加深对三个阶段的理解。