六.函数传参

最新推荐文章于 2024-08-11 18:40:36 发布

qbz-1234

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量136

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qubaozhong1234/article/details/114805089

版权

标题:函数传参与提取行间事件
具体实现:
/*
1.改变背景颜色
–函数传参：参数就是占位符
函数里面有定不下来的东西会使用传参。
2.改变Div的任意样式
–操纵属性的第二种方式
字符串和变量—区别和关系
要修改的属性不固定时候会使用。
–将属性名作为参数传递
3.style与className
–元素.style.属性=xxx是修改行间样式。
–之后再修改className不会有效果。
*/
变换颜色，具体代码实现

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>className</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
        .box{
            background: red;
        }
    </style>
    <script>
        
        function toRed()
        {
            var oDiv=document.getElementById('div1');
            oDiv.className='box';
        }
        function toGreen()
        {
            var oDiv=document.getElementById('div1');
            oDiv.style.background='green';
        }
    </script>
</head>
<body>
    <input type="button" value="变红" onclick="toRed()">
    <input type="button" value="变绿" onclick="toGreen()">
    <div id="div1"></div>
</body>
</html>

函数传参，具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数传参</title>
</head>
<body>
    <script>
        
        function show(num){
            alert(num);
        }
        show('abc');

        function show(a,b){
            alert(a+b);
        }
        show(5,12);
    </script>
</body>
</html>

div变色实现，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div变色</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
        function setColor(color)
        {
            var oDiv=document.getElementById('div1');
            oDiv.style.background=color;
        }

        // function toGreen(){
        //     var oDiv=document.getElementById('div1');
        //     oDiv.style.background='green';
        // }
        // function toYellow(){
        //     var oDiv=document.getElementById('div1');
        //     oDiv.style.background='yellow';
        // }
        // function toBlack(){
        //     var oDiv=document.getElementById('div1');
        //     oDiv.style.background='black';
        // }
    </script>
</head>
<body>
   // <input type="button" value="变绿" οnclick="toGreen()"/>
   // <input type="button" value="变黄" οnclick="toYellow()"/>
   // <input type="button" value="变黑" οnclick="toBlack()"/> 
  
    <input type="button" value="变绿" onclick="setColor('green');"/>
    <input type="button" value="变黄" onclick="setColor('yellow');"/>
    <input type="button" value="变黑" onclick="setColor('black');"/>
    <div id="div1"></div>
</body>
</html>

div改变样式，具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
    <script>
        // function toWidth()
        // {
        //     var oDiv=document.getElementById('div1');
        //     oDiv.style.width='400px';
        // }
        // function toHeight()
        // {
        //     var oDiv=document.getElementById('div1');
        //     oDiv.style.height='400px';
        // }
        // function toGreen()
        // {
        //     var oDiv=document.getElementById('div1');
        //     oDiv.style.background='green';
        // }
        function setStyle(name,value)
        {
            var oDiv=document.getElementById('div1');
            oDiv.style[name]=value;
            //等价于oDiv.style[style]=value;
        }
    </script>
</head>
<body>
    //<input type="button" value="变宽" οnclick="toWidth()"/>
    //<input type="button" value="变高" οnclick="toHeight()"/>
    //<input type="button" value="变绿" οnclick="toGreen()"/>
    <input type="button" value="变宽" onclick="setStyle('width','400px')"/>
    <input type="button" value="变高" onclick="setStyle('height','400px')"/>
    <input type="button" value="变绿" onclick="setStyle('background','green')"/>
    <div id="div1">
    </div>
</body>
</html>

第二种操作属性的方法，具体代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function setText(){
            var a='value';
            var oTxt=document.getElementById('txt1');
            // 第一种操作属性的方法
            // oTxt.value='sdfdfsdggdsf';
            
            // 这种写法也是可以的，修改成功了，但是系统程序不显示，控制台会显示数据。
            // oTxt.title='fdasfadssd';
            //第二种操作属性的方法
            oTxt[a]='sdfdfsdggdsf';
        }
    </script>
</head>
<body>
    <input id="txt1" type="text" />
    <input type="button" value="改变文字" onclick="setText()" />
</body>
</html>

qbz-1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六.函数传参

标题:函数传参与提取行间事件具体实现:1.改变背景颜色–函数传参：参数就是占位符函数里面有定不下来的东西会使用传参。2.改变Div的任意样式–操纵属性的第二种方式字符串和变量—区别和关系要修改的属性不固定时候会使用。3.style与className–元素.style.属性=xxx是修改行间样式。–之后再修改className不会有效果。提取行间事假具体实现：提取事件–为元素添加事件事件和其他属性一样，可以用JS添加window.onload的意义行为，样式，结构三者分离
复制链接

扫一扫