JavaScript学习系列（一）--函数参数以及属性操作

摘要

1.函数传参。
2.两种操作属性的方法。
3.style和className

一、函数传参

改变背景颜色
函数传参：参数就是占位符

什么时候用参数--函数里定不下来的东西

例子（1）改变div的颜色

<script>
    function setColor(color) {
    var oDiv = document.getElementById('div1');
       oDiv.style.background = color;
    } 
</script>

<body>
<input type="button" value="变红" onclick="setColor('red')">
<input type="button" value="变黄" onclick="setColor('yellow')">
<input type="button" value="变绿" onclick="setColor('green')">
<div id="div1"></div>
</body>

例子（2）改变Div的任意样式

<script>
    function setStyle(name, value) {
        var oDiv = document.getElementById('div1');
        oDiv.style[name] = value;
    }  
</script>

<body>
<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>

二、两种操作属性的方法

什么时候用：要修改的属性不固定
字符串和变量--区别和关系

<script>
    function setText(name) {
        var oTx = document.getElementById('txt1');
        // 第一种操作属性的方法
        // oTx.value = 'hhhhh';
        
        // 第二种操作属性的方法
        //oTx['value'] = 'ahkahdc';
        
        oTx[name] = 'heheheheh'
        // 第二种方法的优势在于属性名称是可以更改的 在JS中但凡是可以用点的都可以改成用[]，但是反过来不成立
     } 
</script>

<body>
<input id="txt1" type="text">
<input type="button" value="改变文字" onclick="setText('title')">

</body>

3、style和className

元素.style属性=xxx是修改行间样式
之后再修改className不会有效果

通过下边的代码运行，在浏览器中审查元素会发现：
style加样式在行间
style取样式在行间

<script>
// style加样式   行间
// style取样式   行间

function toRed() {
    var oDiv = document.getElementById('div1');
    //oDiv.style.background = 'red';
}
</script>

<body>
<input type="button" value="变红" onclick="toRed()">
<div id="div1"></div>
</body>

示例1 示例2

如果换成class又会出现另外的情形
我么先看一下在CSS中的样式优先级

*<标签<class<ID<行间

再给一个例子作为比较

<style>
    #div1{  width:200px;  height: 200px; border: solid 1px}
    .box{background: green}
</style>

<script>
    function toRed() {
        var oDiv = document.getElementById('div1');
        oDiv.className = 'box';
    }
    
    function toGreen() {
        var oDiv = document.getElementById('div1');
        oDiv.style.background = 'green';
    }
</script>

<body>
<input type="button" value="变红" onclick="toRed()">
<input type="button" value="变绿" onclick="toGreen()">
<div id="div1"></div>
</body>

示例3 示例4

当先点击红色在点击绿色,div颜色正常显示，但是如果反过来就会发现先点击绿色后在点击变红则无法改变颜色，这就是因为行间样式的优先级大于class的原因，在审查元素的代码变化中也能看到。

因此在这里需要特别注意，对同一个元素，要么从头到尾一只操作class，要么一直操作style，而不要混着来，这样会避免一些很难查找到的问题