文字设置
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>