Js基础--属性读写操作

来源：互联网发布：广数980g71编程实例编辑：程序博客网时间：2024/05/16 05:15

今天刚好学习Js的基础知识部分中的属性读写操作，所以进行了整理，这样也帮助自己总结和归纳。

HTML的属性操作分为读和写操作，基本的操作方法就是属性名.属性值。

1）属性读操作：获取、找到元素

元素. 属性名

2）属性写操作：替换，修改或者添加

元素.属性名 = 属性值

注意：

1、js中不允许出现“ - ”

这个的意思是我们平时在写样式的时候，比如说margin-top，margin-bottom等，中间是用‘-’连接的，但是在Js中，我们如果想要替换或者修改样式的时候，必须将‘-’去掉，然后将后面的首字母变为大写，比如说marginTop，marginBottom。

下面举一个简单的实例：改变字体大小以及样式进行说明。

效果图：

代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>字体变大变小以及修改样式</title>    <style>        p{            font-size:15px;            width: 500px;        }        .content{            width: 400px;            border:2px solid #00A2E9;            color:#1b6d85;            background-color: #b6f3ff;        }    </style>    <script>        window.onload = function(){            var changeSmall = document.getElementById("changeSmall");            var changeBig = document.getElementById("changeBig");            var content = document.getElementById("content");            var changeStyle = document.getElementById("changeStyle");            var num = 15;            changeBig.onclick = function(){                num ++;                // js中不允许出现“ - ”                // font-size   fontSize                content.style.fontSize= num+ 'px';            };            changeSmall.onclick = function(){                num --;                // js中不允许出现“ - ”                // font-size   fontSize                content.style.fontSize= num+ 'px';            };            changeStyle.onclick = function(){                content.className="content";            };        };    </script></head><body><input id="changeSmall" type="button" value="-"><input id="changeBig" type="button" value="+"><input id="changeStyle" type="button" value="改变样式"><p id="content">    假如我们未曾相遇，岸的这边是我，岸的那边是你，凭高远眺也不见对方的影，    看见了也是陌生，甚至擦肩而过，你是你，我还是我，只因无缘，只因眼中眉间那个人还没有出现，    只因冥冥中的赏花人还在岸的那边痴痴的等，忘我的等。只因前世之约，为了那一言之盟，为了不失去你，    不想失去朝思暮想的你，一直等下去，直到你飞舞蹁跹来到我的身边，十指相扣，深情相拥，诉说衷肠。</p></body></html>

2、关键字和保留字 var function ---不可以使用

在前面的例子说明，我在修改样式的时候，是通过给该元素直接添加一个class，在js中不能直接是content.class，而是应该是content.className。

changeStyle.onclick = function(){       content.className="content"; };

3、改变div的浮动

不同的浏览器对于div浮动float可以识别的方法不一样，在IE中需要使用styleFloat，而在非IE中需要使用CSSfloat，为了不同的兼容性，在写这样样式的时候，最好是写三句话。

oDIV.style.float = "left";//保险写法：oDIV.style.styleFloat = "left";oDIV.style.cssFloat = "left";//IE(styleFloat)、非IE（CSSFloat）//可以使用调用className的方式

4、判断的注意事项

1）所有的相对路径都不要拿来判断，但是绝对路径可以进行判断（图片的相对路径可以写但是不能读）
比如说，<img src="images/1.jpg" alt="1">,不同的浏览器在解析src的时候不一样，如下图所示，当我们进行弹出src的值时，是乱码的，因为我的地址里面含有中文，有些浏览器会直接把中文读出来，但是有些不会，而且如果html没有设置编码的时候，也会导致乱码，所以这个相对路径不应该拿来进行判断。

代码：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>读取src值/title><script>window.onload = function (){var oImg = document.getElementById('img1');oImg.onclick = function (){// if( oImg.src == 'img/1.jpg' ){// 不能做为判断条件：// 1、所有的相对路径地址/*img srchref */alert(oImg.src );if( oImg.src == 'file:///C:/Users/Administrator/Desktop/11-4-JS1/img/1.jpg' ){oImg.src = 'img/2.jpg';}};};</script></head><body><img id="img1" src="img/1.jpg" width="400" /></body></html>

2）颜色值不要做判断

因为颜色值的表示方法不同，就常用的方法来说就有3种，第一种是直接颜色的英文：red yellow green等，第二种是十六进制的方法：#ffffff #dfdfdf 等，第三种是rgb的方法：rgb(255,255,255) rgb(0,0,0)等。所以颜色值无法做判断。

3）innerHTML不要拿来做判断

5、Js中允许‘·’替换成‘[]’

如果用js想改变一个属性值，而且这个属性值是一个变量的话，那么久无法通过‘·’实现，比如说oDiv.style.oAttr.value]这个例子来说，本身oDiv.style就是寻找div中的style，那么后面再接上oAttr.value，那就无法知道最后的值到底是什么。所以，在这个例子中就需要再寻找一种方法：用'[]'替换刚才用到的'·'。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js中[]的应用</title>    <style>        #div1{            width:100px;            height:20px;            border:1px solid #00A2E9;        }    </style>    <script>        window.onload = function(){            var oAttr = document.getElementById("attr");            var oVal = document.getElementById("val");            var oBtn = document.getElementById("btn");            var oDiv = document.getElementById("div1");            oBtn.onclick = function(){                oDiv.style[oAttr.value] = oVal.value;                oAttr.value='';                oVal.value='';            };        };    </script></head><body>    请输入属性名称：<input id="attr" type="text"/><br/>    请输入属性值：<input id="val" type="text"/>    <input id="btn" type="button" value="确定"/>    <div id="div1"></div></body></html>

其中，我们可以看到鼠标点击事件中oDiv.style[oAttr.value] = oVal.value，oAttr.value是一个变量，就无法直接使用'·'进行操作，需要用'[]'。

1 0