首页 > 代码库 > DOM初体验（样式设置）

DOM初体验（样式设置）

2024-09-12 19:32:46   216人阅读

一、获取和设置文本

1、 innerHTML

用来获取或设置某个节点下的内容

<div id="box">
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
    </ul>
</div>

<script>
    //获取普通的标签里面的内容
    var box=document.getElementById("box");
    //innerHTML 获取的是某个元素内部的标签+文本(包括子元素)
    //innerText 获取某个元素中的文本（包括子元素）
    console.log(box.innerHTML);
    console.log(box.innerText);
    console.log(box.textContent);
    //        设置普通标签里面的内容--设置内容的时候，会把原来在里面的标签和文本全都覆盖
    //        box.innerHTML = "我还是div里面的内容";
    //        box.innerText = "我还是div里面的内容";
    var html = "<a href=http://www.mamicode.com/"http://www.baidu.com\">百度</a>";
    //innerHTML 当字符串里存在标签的时候，设置内容的时候会被解析成为标签
    //        box.innerHTML = html;
    //当innerText 使用的时候，如果字符串中包含标签，是不会被解析成标签，而是会被转义成为HTML编码
    //        box.innerText = html;
    //textContent
    box.innerHTML = html;
</script>

 

 

 

兼容：所有的主流浏览器都支持

 

2、 innerText

用来获取或设置节点之间的文本，只会获取文本，标签会过滤掉

 

兼容：高版本的主流浏览器都支持，低版本的火狐不支持innerText，而是支持textContent

<script>
    function getInnerText(element) {
        if(element.innerText!=undefined){
            return element.innerText;
        }else if(element.textContent!=undefined){
            return element.textContent;
        }
    }
    function setInnerText(element,cocntent) {
        if(element.innerText!=undefined){
            element.innerText=content;
        }else if(element.textContent!=undefined){
            element.textContent=content;
        }
    }
</script>

 

 

 

二、DOM操作元素的样式

1、 className

DOM中可以通过设置className的方式操作元素的样式，但是需要配合css使用

比如css中有如下代码

用户名：<input type="text" name="username" id="txt_user">
密码：<input type="password" name="password" id="pwd" class="pwd">
<input type="button" value="登录" id="btn">

我们可以通过设置className属性控制元素

<script>
    //用户名 和 密码 验证
    //长度验证
    //要求用户名长度在6-20位之间
    //要求密码在6-12位之间

    //获取元素
    //根据id，根据标签名，根据name，根据className
    //name属性：可以多个元素共用一个name属性，所以根据name属性获取元素，是可以获取多个元素的
    var txt = document.getElementsByName("username")[0];
    //class属性：class也是可以共用的，所以根据class属性获取元素，也是一个集合
    //兼容问题：IE8及以下浏览器不能使用
    var passWord = document.getElementsByClassName("pwd")[0];
    //    var pwd=bootnode.getElementsByClassName("password");
    var btn = document.getElementById("btn");

    //注册事件
    btn.onclick = function () {
        //在事件内验证
        var userName = txt.value;
        if (userName.length < 6 || userName.length > 20) {
            alert("输入的用户名需要在6-20位之间");

        }
        var pwd = passWord.value;
        if (pwd.length < 6 || pwd.length > 12) {
            alert("输入的密码需要在6-12位之间");

        }
        return;
    }


</script>

 

 

2、 style

DOM中还可以通过element.style属性设置元素的样式，style属性民里面有所有与css对应的属性

当css属性只有一个单词的时候：

.hi {

    background: #abc;

}

 



我们可以直接使用style.background来获取或设某个元素css的background属性




hi.style.backgroundColor = "red";




 


 


css属性单词之间的横杠在js当中是不支持的，转变成了采用驼峰命名的多个单词属性，再比如css的text-align属性，在js中是box.style.textAlign，其它属性依此类推




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background: #bfb;}

        .big{

            width: 400px;

            height: 400px;

        }

    </style>

</head>

<body>

<input type="button" value="点击修改大小" id="btn">

<div class="box"style="width: 200px;height: 200px;"></div>

<script src="js/common.js"></script>

<script>

    $id("btn").onclick=function () {

        //修改class

        var  old=$id("box").className;

        old+=" big";

        $id("box").className="big";



        //修改style属性，修改行内样式的做法

        $id("box").style="width:400px;height:400px;";



        //通过修改style对象

        console.log($id("box").style);

        //缺陷

        //如果要修改的样式较多，要一个一个写，比较麻烦

        //如果修改过了，因为修改的是行内样式，下次要修改，只能使用行内样式修改

        //优点：可以一次修改多个

        //console.log($id("box").style.width);

        //console.log($id("box").style.height);

        //如果修改的是style属性，需要加上相应的单位

        $id("box").style.width=400+"px";

        $id("box").style.height=400+"px";

        $id("box").style.backgroundColor="#bfb";

        //属性的书写：把横线去掉，换成驼峰命名法，如果全是小写，就能直接书写

        //如果想要重置某一个属性，直接赋值为空字符串

    }



</script>

</body>

</html>




 


 
DOM初体验（样式设置）






























        

            
                
                  
                
                

                    联系

                    我们