本文主要和大家分享js操作元素属性操作元素样式详解，希望能帮助到大家。
js操作元素属性
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
</style></head><body>
<!--
js中的属性
1: 可读可写
获取原有的内容
设置新的内容
2: 可读不可写
获取原有的值时
length
2: 属性操作
1: 合法属性的操作
直接点操作(可读可写)
class比较特殊,需要操作calssName
不能直接操作不合法属性,如果直接操作,他将变成js自定义属性
直接在等号后面赋值
获取元素之间的区别
1: 获取集合(动态变化的)
集合不是一个固定的东西
更改值之后,就不在指向原来的元素
length同时会发生改变
用一次获取一次
动态方法(class 标签名 选择器 name)
2: 获取单个(静态的)
改变的都是同一个元素,不是集合
获取和修改都是对一个对象进行操作
静态方法(id)
2: 不合法属性的操作(指标签里面的自定义属性)
1: 获取属性 getAttribute
2: 设置 / 修改属性和值 setAttribute
3: 移除属性 removeAttribute
3: 中括号的使用 []
1: 可以直接获取合法属性,在中括号中需要引号
2: 获取集合中的第几个元素
3: 代替大多数的点,只要把点后面的属性值变成字符串就可以了
获取已知属性,但是属性没有办法直接点或者属性是变量 就用[]
-->
<p id="box" class="wrap" title="小花" dachui="大锤" style="height:100px;width:200px;">女生的特点: 喜欢逛吃逛吃逛吃,呜呜呜呜</p>
<p class="wrap"></p>
<p class="wrap"></p>
<p class="wrap"></p>
<p class="wrap"></p>
<script>
var oBox = document.getElementById("box"); var aBox = document.getElementsByClassName("wrap");/* oBox.innerHTML = "总结: 火车";
alert( oBox.innerHTML );
alert( oBox.innerHTML = "总结: 火车" );
aBox.length = 4;
var aa = aBox.length;
alert(aa);//5
*/
/* oBox.id = "mojing";
var x = oBox.id;
//alert(oBox.id);
oBox.className = "aa";
var y = oBox.className;
alert(y);
var z = oBox.title;
//alert(z);
var zz = oBox.dachui;//这种写法属于js的自定义属性
//alert(zz);*/
/*
alert(oBox.id);
oBox.id = "mojing";
alert(oBox.id);
alert(oBox.innerHTML);
alert(aBox.length);//打印5
aBox[0].className = "bb";
aBox[0].innerHTML = "魔镜魔镜,谁是世界上最爱笑的女生!";
alert(aBox.length);//打印4
*/
/*
//获取标签中的自定义属性 getAttribute
//var x = oBox.getAttribute("dachui");
//alert(x);
alert( oBox.getAttribute("id") );
//设置自定义属性和值 setAttribute
oBox.setAttribute("xiaotiantian" , "小甜甜");
oBox.setAttribute("dachui" , "xiaotiantian");
//移除自定义属性 removeAttribute
oBox.removeAttribute("dachui");
oBox.removeAttribute("xiaotiantian")*//*
//oBox.id = "wrap";
oBox["id"] = "wrap2";//不推荐使用这种方式获取
aBox[0].className = "aa";*/
var dachui = 3;
oBox.dachui = 2;//js的自定义属性
//alert(dachui);
var x = "width";
alert(oBox.style[x]); </script></body></html>js操作元素样式
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
#box{ width:200px; }
#css1.aa{ width: 100px; height:100px; background: pink; }
</style></head><body>
<!--
js操作元素样式
1: 样式 外部 内部 行内时
不采用后台操作,纯js不能修改外部样式,只能修改内部和行内样式
2: 修改方式
1: 拼接内部样式(很麻烦,考虑优先级,必须知道id的值是什么,不常用)
2: 行内样式
对象.属性.属性 = "数值";
oBox.style.cssFloat = "";//火狐
oBox.style.styleFloat = "";//ie
获取样式:只能获取行内样式,不能获取内部和外部的样式
复合属性: 去掉横杆,然后采取驼峰命名法
3: class方式修改样式
-->
<p id="box" style="width:100px;height: 100px;background: pink;float:left;">hello wold!</p>
<p id="css1" style="margin-left:50px;"></p>
<script>
var oBox = document.getElementById("box"); var oCss = document.getElementById("css1"); //alert(oBox);/* var oCss = document.getElementById("css");
oBox.style.cssText = "width: 100px;height: 100px;border:1px solid red;";*/
oBox.style.width = "300px";
oBox.style.float = "right";
oCss.className = "aa"; //oBox.innerHTML = oBox.innerHTML + "你好,是你的益达";
oBox.innerHTML += "你好,是你的益达";
oCss.style.marginLeft = "100px"; </script></body></html>display(none、block)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
#box{ position: relative; }
#box img{ position: absolute; top: 0; left: 0; display: none; }
#box #img1{ display: block; }
</style></head><body>
<p id="box">
<img id="img1" src="images/1.jpg" alt="">
<img id="img2" src="images/2.jpg" alt="">
</p>
<script>
var oImg1 = document.getElementById("img1"),
oImg2 = document.getElementById("img2");
oImg1.onclick = function (){
this.style.display = "none";
oImg2.style.display = "block";
};
oImg2.onclick = function (){
this.style.display = "none";
oImg1.style.display = "block";
}; </script></body></html>相关推荐：
