【JavaScript】原生js关于函数以及操作属性的两种方式

最新推荐文章于 2022-07-22 00:49:53 发布

meichaoWen

最新推荐文章于 2022-07-22 00:49:53 发布

阅读量174

点赞数 1

分类专栏： JS实例文章标签： javascript js

本文链接：https://blog.csdn.net/meichaoWen/article/details/111938181

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

完整代码地址：https://github.com/MeichaoWen/JSInstance

js是前端基础，所以再把基础的实例敲一敲，github上有完整的代码。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <input type="button" value="变红" onclick="setColor('red')">
    <input type="button" value="变绿" onclick="setColor('green')">
    <input type="button" value="变黑" onclick="setColor('black')">
    <div id="div1"></div>
    <hr>
    <ol>
        <li>函数的作用：省略重复代码，便于复用</li>
        <li>参数：作用相当于占位符，不限制个数，具体的值只有当函数调用的时候才能够确定</li>
        <li>参数使用场景：函数中有一些东西是不确定的时候 </li>
    </ol>
    <script>
        function setColor(color){
            var oDiv = document.getElementById('div1');
            oDiv.style.background = color;
        }
    </script>
</body>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <input type="button" value="变宽" onclick="setStyle('width', '400px')">
    <input type="button" value="变高" onclick="setStyle('height', '400px')">
    <input type="button" value="变黑" onclick="setStyle('background', 'black')">
    <div id="div1"></div>
    <hr>
    <ol>
        <li>操作属性的两种方式：1、. 2、[]</li>
        <li>操作属性的方式[]使用场景:操作的属性不固定，[]内可以是变量、参数或者字符串</li>
        <li>变量和参数可以不加引号，其余必须加，否则会报错 not defined</li>
    </ol>
    <script>
        function setStyle(name, value){
            var oDiv = document.getElementById('div1');
            oDiv.style[name] = value;
            //操作属性的两种方式
            //第一种
            //oDiv.style.width   -> .
            //第二种
            //oDiv['style'].width -> []
        }
        alert(ii)
    </script>
</body>