今天刚好学习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没有设置编码的时候,也会导致乱码,所以这个相对路径不应该拿来进行判断。
比如说,<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 src
href
*/
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是一个变量,就无法直接使用'·'进行操作,需要用'[]'。