JS示例04-属性控制方式二

一、知识要点

1、属性控制 [ ]

二、源码参考

<!DOCTYPE >
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            #div1 {
                width: 200px;
                height: 100px;
                border: 1px solid #999;
            }
            
            .boxred {
                background: red;
            }
        </style>
        <script>
            window.onload = function() {
                var btn1 = document.getElementById('btn1');
                var btn2 = document.getElementById('btn2');

                var div1 = document.getElementById('div1');

                function setStyle(name, value) {
                    div1.style[name] = value; // 通过[]改变属性
                }

                btn1.onclick = function() {
                    setStyle('background', 'red');
                }
                
                btn2.onclick = function() {
                    setStyle('background', 'green');
                }
            }
        </script>
    </head>

    <body>
        <input type="button" name="btn1" id="btn1" value="变红" />
        <input type="button" name="btn2" id="btn2" value="变绿" />
        <div id="div1">

        </div>
    </body>

</html>

三、运行效果

QQ20190328-163137.gif

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码客

Android开发使用Lambda表达式

AndroidStudio从2.1开始官方通过Jack支持Java8,从而使用Lambda等特性。

11930
来自专栏码客

Mac OS 上设置 JAVA_HOME

由于需要,前几天在 OS X 上安装了 Oracle 的 Java 7。安装之后,发现由于我原来设置的 JAVA_HOME 为 /Library/Java/Ho...

8120
来自专栏10km的专栏

nanohttpd:实现跨域(CORS)请求

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

19420
来自专栏好好学java的技术栈

推荐几个IDEA插件,Java开发者撸码利器。

一款热部署插件,只要不是修改了项目的配置文件,用它都可以实现热部署。收费的,破解比较麻烦。不过功能确实很强大。算是开发必备神器了。热部署快捷键是control+...

9630
来自专栏java 微风

JVM的新生代、老年代、MinorGC、MajorGC

原文链接:https://www.cnblogs.com/ygj0930/p/6522828.html

6520
来自专栏码客

Mac上用MyEclipse创建Maven Web项目

右键 –> New –> Project –> 搜索Maven Project –> 设置存放位置 –> 选择项目类型为 maven-archetype-web...

6510
来自专栏好好学java的技术栈

动画+原理+代码+优化,解读十大经典排序算法

排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。常见...

8150
来自专栏好好学java的技术栈

自己手撸一个 JSON 解析器

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。采用...

9320
来自专栏实战docker

Java应用在docker环境配置容器健康检查

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

13320
来自专栏码客

Android Activity的启动模式

当通过这种模式来启动Activity时,Android总会为目标 Activity创建一个新的实例,并将该Activity添加到当前 Task栈中.注意,这种方...

7930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励