js的属性操作和简单函数

作者: jackmanzhang | 来源:发表于2018-09-16 20:04 被阅读0次

js的属性操作和简单函数
JS操作属性、函数
JS操作属性、JS换肤、JS操作style属性、JS操作clas
js中的原型链
JS原型链简单图解
JS原型链简单图解
前端笔记10
2018-12-01
js内置函数的改写问题
JS-12day

更改属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            document.getElementById("bd").title="去去去";
            var link1=document.getElementById("link1")
            link1.title="去百度";                      //将title属性更改
            link1.href="https://www.jd.com";          //将href属性重新修改
        }
    </script>
</head>
<body>
<a href="http://www.baidu.com" title="来来来" id="bd" name="bd">百度</a>
<a href="http://www.baidu.com" id="link1">啦啦啦</a>
</body>
</html>

设置style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <script type="text/javascript">
     window.onload=function () {
         var q=document.getElementById("div1")
         q.style.color="red"
         q.style.background="green" //没有变量时直接用点
         q.style.fontSize="200px"    
         attr="fontSize"
         q.style[attr]="50px"        //有变量写在中括号里
         alert(q.innerHTML)
         alert(q.innerText)
     }
 </script>
</head>
<body>
<div id="div1">666</div>

</body>
</html>

匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var s=document.getElementById("box");
            s.onclick=function () {           //可以在设置功能时不写函数名直接在function(){}中写出功能。
                alert('ok')
            }
            var s1=document.getElementById('box');
            function bianliang(sty1,val) {      //向函数中传递2个变量时下面的变化如下所示：
                s1.style[sty1]=val;
            }
            bianliang('color','red');
            bianliang('background','green');
        }
    </script>
</head>
<body>
<div id="box">11</div>
</body>
</html>

return 可以设置变量接收返回的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            o=document.getElementById("one");
            t=document.getElementById('two');
            b=document.getElementById('btn1');
            function add(a,b){
                c=parseInt(a)+parseInt(b)
                return c      
            }
            b.onclick=function(){
                val1=o.value;
                val2=t.value;
                var result=add(val1,val2)    //接收函数返回的结果
                alert(result)
            }

        }
    </script>
</head>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type="button" id="btn1" value="相加">
</body>
</html>

if else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 100px;
            background-color: #d86aff;
            height: 100px;

        }
    </style>
    <script type="text/javascript">
        //if -----else
        window.onload=function () {
            var box=document.getElementById('box');
            var btn=document.getElementById('btn1');
            alert(box.style.display)
            btn.onclick=function () {
                if(box.style.display=='none'){
                    box.style.display='block'
                } else {
                    box.style.display='none'
                }
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn1" value="点击">
<div  class="box" id="box"></div>

</body>
</html>