DOM文字设置和元素样式设置

文字设置

innerText:可以操作元素对象中文本(不带标签的纯文本)

获取文本:

语法:对象.innerText

注意:获取到的内容:元素对象中的所有文本(不包括标签)

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	    <div id = "box">
            这是一段纯文本
            <p>这是段落文本</p>
        </div>
        <script type = "text/javascript">
           //需求:获取box中的innerHTML
            	//1.获取到box元素
            var box = document.getElementById("box");
            	//2.获取到box文本
            var text1 = box.innerText;
            console.log(text1);
        </script>
    </body>
</html>

 

设置文本:

语法:对象.innerText = 值

注意:innerText赋值文本时,如果含有标签,会把标签看作普通文本,所以不解析

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div id = "box">
            这是一段纯文本
            <p>这是段落文本</p>
        </div>
        <div id = "box2" style = "height:200px;border:1px solid red;">
            
        </div>
        <script type = "text/javascript">
           //需求:给box2设置一段带有标签的文本(innerText)
            	//获取到box2元素
            var box2 = document.getElementById("box2");
            	//设置一段带有标题标签的文本
            box2.innerText = "<h1>这是h1标题</h1>";
        </script>
    </body>
</html>

 

innerHTML:可以操作元素对象中的HTML代码(带有标签的文本),标准语法

获取文本:

语法:对象.innerHTML

注意:获取到的内容:元素对象中的所有文本(包括标签)

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	    <div id = "box">
            这是一段纯文本
            <p>这是段落文本</p>
        </div>
        <script type = "text/javascript">
           //需求:获取box中的innerHTML
            	//1.获取到box元素
            var box = document.getElementById("box");
            	//2.获取到box文本
            var text1 = box.innerHTML;
            console.log(text1);
        </script>
    </body>
</html>

 

设置文本:

语法:

对象.innerHTML = 值

注意:innerHTML赋值文本时,如果含有标签,会解析

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div id = "box">
            这是一段纯文本
            <p>这是段落文本</p>
        </div>
        <div id = "box2" style = "height:200px;border:1px solid red;">
            
        </div>
        <script type = "text/javascript">
           //需求:给box2设置一段带有标签的文本(innerHTML)
            	//获取到box2元素
            var box2 = document.getElementById("box2");
            	//设置一段带有标题标签的文本
            box2.innerHTML = "<h1>这是h1标题</h1>";
        </script>
    </body>
</html>

元素样式设置

 

style

行间样式:

获取属性的语法:

对象.style.属性名

设置属性的语法:

对象.style.属性名 = 值

案例:获取行间样式

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div style = "width:200px;height:200px;background:red;border:2px solid blue;">
            好神奇
        </div>
        <script type = "text/javascript">
          //需求:获取div元素的行间样式:width
            //1.通过标签名获取元素
            var div = document.getElementsByTagName("div");
            console.dir(div[0].style.width);
        </script>
    </body>
</html>

 案例:设置行间样式

 

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div id = "box" style="width:200px;height:200px;background:red;border:2px solid blue;">
            好神奇
        </div>
        <script type = "text/javascript">
          //需求:获取div元素的行间样式:width
            //1.通过ID获取元素
            var div = document.getElementById("box");
            div.style.backgroundColor = "yellow" ;
        </script>
    </body>
</html>

 

注意:

1.如果CSS属性使用了连字符(-),则使用JavaScript获取或设置时要将该属性改为驼峰大小写方式,例如background-color ==> backgroundColor

2.float是系统关键字,因此不能直接使用,需要改为cssFloat,即obj.style.cssFloat

className

设置属性的语法:

对象.className = 类名

 

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
        <style type="text/css">
        	.prar{
        		width:200px;height:200px;background:red;border:2px solid blue;
        	}
        </style>
    </head>
    <body>
  	   <div id = "box"> <!--class = "prar" style="width:200px;height:200px;background:red;border:2px solid blue;"-->
            好神奇
        </div>
        <div id = "box2">
            真快乐!!
        </div>
        <script type = "text/javascript">
          //需求:获取div元素的行间样式:width
            //1.通过标签名获取元素
            var div = document.getElementById("box2");
            div.className = "prar" ;
        </script>
    </body>

 

classList

设置属性的语法:

对象.classList.add("类名",”类名“);

 

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
        <style type="text/css">
        	.prar{
        		width:200px;height:200px;background:red;border:2px solid blue;
        	}
            .shadow {
   box-shadow: 4px 2px 8px green;
}
        </style>
    </head>
    <body>
        <div id = "box2">
            真快乐!!
        </div>
        <script type = "text/javascript">
          //需求:获取div元素的行间样式:width
            //1.通过标签名获取元素
            var div = document.getElementById("box2");
            div.classList.add("prar","shadow") ;
        </script>
    </body>

 

设置属性的语法:

对象.classList.remove("类名");

 

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
        <style type="text/css">
        	.prar{
        		width:200px;height:200px;background:red;border:2px solid blue;
        	}
            .shadow {
            box-shadow: 4px 2px 8px green;
            }
        </style>
    </head>
    <body>
        <div id = "box2" class="prar shadow">
            真快乐!!
        </div>
        <script type = "text/javascript">
          //需求:获取div元素的行间样式:width
            //1.通过标签名获取元素
            var div = document.getElementById("box2");
            div.classList.remove("prar") ;
        </script>

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值