javascript-对文档对象的内容、属性和样式的操作
2020-01-01 本文已影响0人
ssttIsme
javascript-对文档对象的内容、属性和样式的操作
一、操作内容
1.innerHtml用来设置或获取对象起始和结束标签内的内容(识别html标签)
2.innerText用来设置或获取对象起始和结束标签内的文字内容(IE)
3.textContent用来设置或获取对象起始和结束标签内的文字内容(火狐)
4.outerHTML用来设置或获取包括本对象在内的起始和结束标签内的内容(识别html标签)
5.outerText用来设置或获取包括本对象在内的起始和结束标签内的文字内容(不兼容火狐)
innerHtml
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid gold;
color: gold;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<h2>
盒子1的内容
</h2>
</div>
<button id="btn">↓</button>
<div class="box2" id="box2"></div>
<script>
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn=document.getElementById("btn");
btn.onclick=function(){
var contents=box1.innerHTML;
box2.innerHTML=contents;
}
</script>
</body>
innerText
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid gold;
color: gold;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<h2>
盒子1的内容
</h2>
</div>
<button id="btn">↓</button>
<div class="box2" id="box2"></div>
<script>
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn=document.getElementById("btn");
btn.onclick=function(){
var contents=box1.innerText;
box2.innerText=contents;
}
</script>
</body>
textContent
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid gold;
color: gold;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<h2>
盒子1的内容
</h2>
</div>
<button id="btn">↓</button>
<div class="box2" id="box2"></div>
<script>
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn=document.getElementById("btn");
btn.onclick=function(){
var contents=box1.textContent;
box2.textContent=contents;
}
</script>
</body>
兼容写法
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid gold;
color: gold;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<h2>
盒子1的内容
</h2>
</div>
<button id="btn">↓</button>
<div class="box2" id="box2"></div>
<script>
function getContent(obj,val) {
//ie
if(document.all){
if(val){
obj.innerText=val;
}else{
return obj.innerText;
}
}else{
//火狐
if(val){
obj.textContent=val;
}else{
return obj.textContent;
}
}
}
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn=document.getElementById("btn");
btn.onclick=function(){
var contents=getContent(box1);
getContent(box2,contents);
}
</script>
</body>
outerHTML
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid gold;
color: gold;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<h2>
盒子1的内容
</h2>
</div>
<button id="btn">↓</button>
<div class="box2" id="box2"></div>
<script>
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn=document.getElementById("btn");
btn.onclick=function(){
var contents=box1.outerHTML;
box2.outerHTML=contents;
}
</script>
</body>
outerText
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
color: red;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid gold;
color: gold;
}
</style>
</head>
<body>
<div class="box1" id="box1">
<h2>
盒子1的内容
</h2>
</div>
<button id="btn">↓</button>
<div class="box2" id="box2"></div>
<script>
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var btn=document.getElementById("btn");
btn.onclick=function(){
var contents=box1.outerText;
box2.outerText=contents;
}
</script>
二、操作属性
2.1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))
<body>
<a href="history1.html" title="历史1">链接</a>
<button>改变链接</button>
<hr>
<script>
var links=document.getElementsByTagName("a")[0];
document.write(links.href);
document.write("<br/>");
document.write(links.title);
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function () {
links.href="history2.html";
links.title="历史2";
};
</script>
</body>
2.2方法操作
getAttribute("属性")获取给定的属性的值
setAttribute("属性","值")设置或是添加属性
<body>
<a href="history1.html" title="历史1">链接</a>
<button>改变链接</button>
<hr>
<script>
var links=document.getElementsByTagName("a")[0];
document.write(links.getAttribute("href"));
document.write("<br/>");
document.write(links.getAttribute("title"));
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function () {
links.setAttribute("href","history2.html");
links.setAttribute("title","历史2");
};
</script>
</body>
三、操作样式
3.1操作行内样式
对象.style.属性获取给定的样式
对象.style.属性=值设置或是添加样式
遇到属性是"-"连接的，要将"-"去掉，后面的单词的首字母大写
<body>
<a href="history1.html" style="color:orange;background: greenyellow;padding: 10px">链接</a>
<hr>
<div></div>
<script>
var links=document.getElementsByTagName("a")[0];
var div=document.getElementsByTagName("div")[0];
div.innerHTML=links.style.color;
links.onmouseover=function () {
links.style.color="blue";
links.style.backgroundColor="pink";
links.style.fontSize="2em";
div.innerHTML=links.style.color;
};
links.onmouseout=function () {
links.style.color="orange";
links.style.backgroundColor="greenyellow";
links.style.fontSize="1em";
div.innerHTML=links.style.color;
};
</script>
</body>
3.1操作css层叠样式
A.通过id来更改样式(适合批量更改)
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
#box1{
width: 200px;
height: 200px;
border: 1px solid pink;
font-size: 2em;
color:pink;
padding: 5px;
}
#box2{
width: 250px;
height: 250px;
border: 1px solid blue;
font-size: 3em;
color: blue;
padding: 2px;
}
</style>
</head>
<body>
<div class="box1" id="box1">
我是第一个盒子
</div>
<button id="btn">更改样式</button>
<script>
var btn=document.getElementById("btn");
var box1=document.getElementById("box1");
btn.onclick=function () {
box1.id="box2";
};
</script>
</body>
B.通过className来更改样式(适合批量更改)
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid pink;
font-size: 2em;
color:pink;
padding: 5px;
}
.box2{
width: 250px;
height: 250px;
border: 1px solid blue;
font-size: 3em;
color: blue;
padding: 2px;
}
</style>
</head>
<body>
<div class="box1" id="box1">
我是第一个盒子
</div>
<button id="btn">更改样式</button>
<script>
var btn=document.getElementById("btn");
var box1=document.getElementById("box1");
btn.onclick=function () {
box1.className="box2";
};
</script>
</body>
C.更改或者获取或者设置某个属性的值
document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值
document.styleSheets样式表的集合
document.styleSheets[0].rules样式规则的列表(IE)
document.styleSheets[0].rules[0].style样式表的样式规则的集合(IE)
alert(document.styleSheets[0].rules[0].style);
document.styleSheets[0].cssRules样式规则的列表(火狐)
document.styleSheets[0].cssRules[0].style样式表的样式规则的集合(火狐)
alert(document.styleSheets[0].cssRules[0].style);
兼容写法
function cssRule(a,b) {
var a=a||0;
var b=b||0;
if(document.all){
return document.styleSheets[a].rules[b].style;
}else{
return document.styleSheets[a].cssRules[b].style;
}
}
alert(cssRule().width);
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid pink;
font-size: 2em;
color:pink;
padding: 5px;
}
</style>
</head>
<body>
<div class="box1" id="box1">
我是第一个盒子
</div>
<button id="btn">更改样式</button>
<script>
function cssRule(a,b) {
var a=a||0;
var b=b||0;
if(document.all){
return document.styleSheets[a].rules[b].style;
}else{
return document.styleSheets[a].cssRules[b].style;
}
}
var btn=document.getElementById("btn");
btn.onclick=function () {
cssRule().height="500px";
cssRule().margin="100px";
};
</script>
</body>
D.动态地添加、删除css样式
document.styleSheets[下标].insertRule("选择器{属性:值}",位置)(火狐)
document.styleSheets[下标].deleteRule(位置)(火狐)
document.styleSheets[下标].addtRule("选择器","属性:值",位置)(IE)
document.styleSheets[下标].removeRule(位置)(IE)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-对文档对象的内容、属性和样式的操作</title>
<style>
#box1{
width: 200px;
height: 200px;
border: 1px solid pink;
font-size: 2em;
color:pink;
padding: 5px;
}
</style>
</head>
<body>
<div class="box1" id="box1">
我是第一个盒子
</div>
<button id="btn">更改样式</button>
<script>
var btn=document.getElementById("btn");
btn.onclick=function () {
document.styleSheets[0].addRule("#box1","margin:50px",0);
document.styleSheets[0].removeRule(1);
};
</script>
</body>
3.2操作行内样式和css层叠样式通用的方式(只能获取不能设置)
对象.currentStyle.属性(IE)获取实际的样式的属性
var box1=document.getElementById("box1");
alert( box1.currentStyle.width);
getComputedStyle(对象,null)(火狐)
var box1=document.getElementById("box1");
alert(getComputedStyle(box1,null).width);
