js属性读写注意事项

（一）、js中不允许出现的特殊字符：js中不允许“-”，所以类似font-size、margin-top、padding-left等需要写成：fontSize、marginTop、paddingLeft

例如：HTML部分：

<div class="box">
    <a href="javascript:;" id="a1">-</a>
    <a href="javascript:;" id="a2">+</a>
    <p id="p1">
        大会由人民邮电出版社主办，中国电信、中国移动、中国联通、信息通信大数据产业联盟支持，通信世界全媒体平台、物联网学报、万物互联产业联盟(GIA联盟)协办，
        信通传媒、信通创展科技承办，围绕物联网相关政策、平台规划与建设、网络安全、NB-IoT等新技术的发展及其在垂直领域的创新应用，700多位业界人士群策群力，
        共促物联网产业创新发展。大会同期还表彰了通信物联网行业优秀个人、企业和产品技术，宣传行业先进典型，发挥先进典型的示范作用，引领行业健康发展。
    </p>
</div>

css：

.box{margin:20px auto;padding:20px;width:886px;border:2px solid #800080;}
.box a{
    text-decoration: none;
    display:inline-block;
    height:30px;
    line-height:30px;
    width:50px;
    text-align: center;
    border:1px solid #ccc;
    background:#f1f1f1;
}

效果：

当点击+、- 号时字体大小会随之变化；js代码如下：

window.onload=function (){
    var oA1=document.getElementById("a1");
    var oA2=document.getElementById("a2");
    var oP=document.getElementById("p1");
    var num=15;
    oA1.onclick=function (){
        num--;
        oP.style.fontSize=num+"px";
        //js中不允许“-”，所以类似font-size、margin-top、padding-left等需要写成：fontSize、marginTop、paddingLeft
    }
    oA2.onclick=function (){
        num++;
        oP.style.fontSize=num+"px";
    }
};

（二）、给元素添加class、class为保留字   在js属性读写的时候应该写成className

<div class="box">
    <a href="javascript:;" id="a3">红</a>
    <a href="javascript:;" id="a4">蓝</a>
    <p id="p1">
        大会由人民邮电出版社主办，中国电信、中国移动、中国联通、信息通信大数据产业联盟支持，通信世界全媒体平台、
        物联网学报、万物互联产业联盟(GIA联盟)协办，信通传媒、信通创展科技承办，围绕物联网相关政策、平台规划与建
        设、网络安全、NB-IoT等新技术的发展及其在垂直领域的创新应用，700多位业界人士群策群力，共促物联网产业创新
        发展。大会同期还表彰了通信物联网行业优秀个人、企业和产品技术，宣传行业先进典型，发挥先进典型的示范作用，
        引领行业健康发展。
    </p>
</div>

.box{margin:20px auto;padding:20px;width:886px;border:2px solid #800080;}
.box a{
    text-decoration: none;
    display:inline-block;
    height:30px;
    line-height:30px;
    width:50px;
    text-align: center;
    border:1px solid #ccc;
    background:#f1f1f1;
}
.red{
    width:500px;
    padding:20px;
    color:#fff;
    background:red;
    border:5px solid #ccc;
}
.blue{
    width:500px;
    padding:20px;
    color:#fff;
    background:blue;
    border:5px solid #FFFF00;
}

点击红、蓝两个按钮分别为p元素添加红色、蓝色背景颜色：

window.onload=function (){
    var oA3=document.getElementById("a3");
    var oA4=document.getElementById("a4");
    var oP=document.getElementById("p1");
    
    oA3.onclick=function (){
        oP.className="red";
        //注意这不可以是class，class为保留字   应该写成className
    }
    oA4.onclick=function (){
        oP.className="blue";
    }；
}；

（三）、所有的相对路径都别拿来做判断（src、href），除非是绝对路径可以（href="http://www.baidu.com"）；颜色值别拿来做判断：color:red  #ff0000  rgb(250,0,0) ； innerHTML值别拿来做判断

相对路径不可以进行读操作，但是可以进行写操作，例如：在（六）例子中，我们可以通过在第一个输入框中写入background属性名，然后在第二个输入框中写入一个图片的相对路径，实现为div添加背景图片

（四）、表单元素的type值修改

<input type="button" id="btn" value="按钮" />

var oBtn=document.getElementById("btn");
oBtn.onclick=function (){
    oBtn.type="checkbox"; 
     //IE6、IE7、IE8不兼容，会报错   
    //可以换一种思路解决这个问题：页面上方一个按钮和一个复选框，另复选框隐藏、用js判断一下
    //当点击按钮的时候隐藏按钮显示复选框
};

<input type="button" id="btn" value="点击" />
<input type="checkbox" id="cbox" />

#cbox{display:none}

var oBtn=document.getElementById("btn");
var oCbox=document.getElementById("cbox");
oBtn.onclick=function (){
    oBtn.style.display="none";
    oCbox.style.display="block";
};

（五）、float的兼容性问题

<div id="box"></div>

var oDiv=document.getElementById("box");
oDiv.style.float="left";
//float的兼容性问题
//oDiv.style.float="left";  //会出现一些兼容性问题，我们可以这样写：
//oDiv.style.styleFloat="left"; //针对IE
//oDiv.style.cssFloat="left";  //针对非IE浏览器

//为了不出现这类兼容性问题，我们可以通过：
//<div class="right" id="box"></div>
//.left{float:left;}
//.right{float:right;}
//通过className
//var oDiv=document.getElementById("box");
//oDiv.className="left";

（六）、属性操作中的[]

请输入属性名：<input type="text" id="txt1" />
请输入属性值：<input type="text" id="txt2" />
<input type="button" id="btn1" value="按钮" />
<div id="div2"></div>


#div2{width:100px;height:100px;border: 1px solid red;}

var oBtn1=document.getElementById("btn1");
var oTxt1=document.getElementById("txt1");
var oTxt2=document.getElementById("txt2");
var oDiv=document.getElementById("div2");
//js中允许" . " 替换成 [] ,[]里面指的是字符串，所以在写的时候注意需要加上""
oBtn1.onclick=function (){
    oTxt1.value;  //width  background  height  border
    //oTxt1["value"]  可以写成这样
    oTxt2.value;  //200px  red  300px  1px solid #ccc
    //oDiv.style.width=oTxt2.value;  // . 后面的值是固定的无法改变
    oDiv.style[oTxt1.value]=oTxt2.value;  // []里面的值可以随便写    这里的[]不能加""，不然出不来结果
};

可以在第一个输入框中输入：width  height  background  border 等等属性名；在第二个输入框中可以输入对应的值：200px  200px  red  1px solid #ccc等等属性值，然后点击按钮，div会随之而变化