javascript-对文档对象的内容、属性和样式的操作

作者: ssttIsme | 来源:发表于2020-01-01 20:31 被阅读0次

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);

javascript-对文档对象的内容、属性和样式的操作