目录
1.innerHTML
- 用于获取或设置指定元素的HTML内容。
- 当设置时，它会将字符串解析为HTML或XML，并插入到DOM树中。
- 示例:
element.innerHTML = "<p>这是一个段落。</p>";
案例:使用innerHTML修改文本内容
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>innerHTML操作文本内容</title> <style> #myDiv { background-color: #f0f0f0; padding: 10px; } #myButton { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; } </style> </head> <body> <div id="myDiv">这是原始文本内容</div> <button id="myButton">点击修改修改文本内容</button> <script> // 获取元素 var myDiv = document.getElementById("myDiv"); var myButton = document.getElementById("myButton"); // 绑定事件 myButton.onclick = function () { // 修改文本内容 myDiv.innerHTML = "<h1>这是修改后的文本内容</h1>"; }; </script> </script> </body> </html>
2.效果
注：可以看到<h1></h1>被浏览器解析为了
2.innerText
- 用于获取或设置指定元素的“人类可读”文本内容。
- 它不会包含HTML标签，而是只处理纯文本。
- 示例:
element.innerText = "你好，世界！";
案例:使用innerText修改文本
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用innerText修改文本</title> <style> body { font-family: Arial, sans-serif; } #myDiv { background-color: #aa9c9c; padding: 10px; } #myALterButton { background-color: #2cce32; color: rgb(221, 23, 23); padding: 8px 16px; border: none; cursor: pointer; } </style> </head> <body> <div id="myDiv">Hello World!</div> <button id="myALterButton">换成中文</button> <script> // 获取元素 var myDiv = document.getElementById("myDiv"); var myALterButton = document.getElementById("myALterButton"); // 绑定事件 myALterButton.onclick = function () { // 修改文本 myDiv.innerText = "<h1>你好，世界！</h1>"; } </script> </body> </html>
2.效果
注：innerText不会解析标签
3.textContent
- 与
innerText类似，但更标准且跨浏览器兼容性更好。 - 它也用于获取或设置节点及其后代的文本内容。
- 示例:
element.textContent = "这是另一个文本。";
案例:使用textContent修改文本
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用textContent修改文本</title> <style> #myDiv { background-color: #f0f0f0; padding: 20px; text-align: center; } #myButton { padding: 10px 20px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <div id="myDiv">Hello World!</div> <button id="myButton">使用textContent修改文本</button> <script> // 获取元素 var myDiv = document.getElementById("myDiv"); var myButton = document.getElementById("myButton"); // 绑定事件 myButton.addEventListener("click", function () { // 修改文本内容 myDiv.textContent = "Hello JavaScript!"; }); </script> </body> </html>
2.效果
4.通过style属性操作样式
- background 设置/获取获取背景
- background 设置/获取背景颜色
- display 设置/获取元素类型
- fontSize 设置/获取元素大小
- height 设置获取元素的宽
- left 设置/获取定位元素的坐不位置
- listStyle 设置获/取列表类型
- textAlign 设置或获取文本水平对其方式
- textDecoration 设置获取文本修饰
element.style.backgroundColor = 'red'; // 设置背景颜色 element.style.display = 'none'; // 隐藏元素 element.style.fontSize = '16px'; // 设置字体大小 element.style.height = '100px'; // 设置高度 element.style.left = '50px'; // 设置左侧位置 element.style.listStyle = 'circle'; // 设置列表样式 element.style.textAlign = 'center'; // 设置文本对齐方式 element.style.textDecoration = 'underline'; // 设置文本装饰
案例:改变小球颜色
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变小球颜色</title>
</head>
<body>
<div id="ballContainStyle">
<div id="ball"></div>
</div>
<button id="myRedButton">红色</button>
<button id="myBlueButton">蓝色</button>
<button id="myGreenButton">绿色</button>
<button id="myRandomButton">随机颜色</button>
<script>
//获取小球
var ball = document.querySelector("#ball");
//获取按钮
var redButton = document.querySelector("#myRedButton");
//获取蓝色按钮
var blueButton = document.querySelector("#myBlueButton");
//获取绿色按钮
var greenButton = document.querySelector("#myGreenButton");
//获取随机颜色按钮
var randomButton = document.querySelector("#myRandomButton");
//绑定事件
redButton.onclick = function () {
ball.style.backgroundColor = "red";
}
//绑定蓝色事件
blueButton.onclick = function () {
ball.style.backgroundColor = "blue";
}
//绑定绿色事件
greenButton.onclick = function () {
ball.style.backgroundColor = "green";
}
//绑定随机颜色事件
randomButton.onclick = function () {
var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
ball.style.backgroundColor = randomColor;
}
</script>
</body>
</html>2.效果
5.通过className属性操作样式
- 用于获取或设置元素的class名。
- 如果要添加多个类名，可以使用空格分隔。
- 示例:
element.className = 'new-class another-class';
案例:改变形状
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>改变形状</title> <style> #myDiv { width: 800px; height: 600px; background-color: rgb(204, 188, 188); display: flex; justify-content: center; align-items: center; } #myBall { } .myButtonStyle { width: 100px; height: 30px; background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); margin: 5px; } .myButtonStyle:hover { background-color: rgb(10, 255, 10); color: rgb(238, 3, 3); } /* 改变形状 */ .mySquareShape { width: 200px; height: 200px; background-color: rgb(13, 103, 238); border-radius: 0%; } .myCircleShape { width: 200px; height: 200px; background-color: rgb(255, 255, 0); border-radius: 50%; } .myTriangleShape { width: 0px; height: 0px; border: 0px solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid rgb(42, 253, 0); } .myRectangleShape { width: 200px; height: 100px; background-color: rgb(37, 236, 226); border-radius: 0%; } /* 会呼吸的球球 */ @keyframes myBreadthBall { /** * 颜色变化多一些 */ 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div id="myDiv"> <div class="myCircleShape" id="myBall"></div> </div> <button id="square" class="myButtonStyle">方形</button> <button id="circle" class="myButtonStyle">圆形</button> <button id="triangle" class="myButtonStyle">三角形</button> <button id="rectangle" class="myButtonStyle">长方形</button> <script> // 获取元素 var myDiv = document.getElementById("myDiv"); // 获取按钮 var square = document.getElementById("square"); var circle = document.getElementById("circle"); var triangle = document.getElementById("triangle"); var rectangle = document.getElementById("rectangle"); var myBall = document.getElementById("myBall"); // 绑定事件 square.onclick = function () { myBall.className = "mySquareShape"; myBall.style.transform = "translate(-50%, -50%)"; }; circle.onclick = function () { myBall.className = "myCircleShape"; myBall.style.transform = "translate(-50%, -50%)"; }; triangle.onclick = function () { myBall.className = "myTriangleShape"; myBall.style.transform = "translate(-50%, -50%)"; }; rectangle.onclick = function () { myBall.className = "myRectangleShape"; myBall.style.transform = "translate(-50%, -50%)"; } // 确保动画正常工作 myBall.style.animation = "myBreadthBall 1s ease-in-out infinite"; </script> </body> </html>
解释
想象你有一个大画板（<div id="myDiv">），它有800像素宽和600像素高，背景是浅灰色。在这个画板的正中央，放着一个小球（<div class="myCircleShape" id="myBall"></div>）。初始时，这个小球是个黄色的圆形。
在画板下面，你有一排按钮，每个按钮都有不同的功能：
- 一个是方形按钮（
<button id="square" class="myButtonStyle">方形</button>）。 - 一个是圆形按钮（
<button id="circle" class="myButtonStyle">圆形</button>）。 - 一个是三角形按钮（
<button id="triangle" class="myButtonStyle">三角形</button>）。 - 最后一个是长方形按钮（
<button id="rectangle" class="myButtonStyle">长方形</button>）。
当你点击这些按钮时，它们会告诉小球变成相应的形状。比如，如果你点击了方形按钮，小球就会变成蓝色的方形；如果点击圆形按钮，它又会变回原来的黄色圆形；点击三角形按钮，小球会变成绿色的三角形；点击长方形按钮，它会变成青色的长方形。
有趣的是，无论小球变成了什么形状，它都会在画板中心保持居中的位置，这是因为使用了CSS的 transform: translate(-50%, -50%) 来确保它的中心点与画板的中心点对齐。
此外，这个小球还有一个特别的功能——它会“呼吸”。也就是说，即使你改变了它的形状，它也会不断地变大再变小，就像在呼吸一样。这是通过CSS动画 @keyframes myBreadthBall 实现的，动画会让小球每隔一秒就从原始大小放大到1.5倍，然后再缩小回原样，循环往复。
整个效果就像是你在玩一个互动游戏，通过点击不同的按钮来变换屏幕中间的图形，并且这个图形还会不停地“呼吸”变化。
2.效果
6.通过classList属性操作样式
add(class1, class2, ..., classN)：向元素添加一个或多个类名。如果类名已经存在，则不会重复添加。remove(class1, class2, ..., classN)：从元素中移除一个或多个类名。如果类名不存在，则什么也不做。toggle(className, [force])：切换类名的存在状态。如果没有强制参数，那么如果类名存在则移除，如果不存在则添加。如果设置了force参数，当force为true时总是添加类名，为false时总是移除类名。contains(className)：检查元素是否包含指定的类名。返回true或false。replace(oldClass, newClass)：用新的类名替换旧的类名。如果旧的类名不存在，则不做任何改变。item(index)：获取位于指定索引处的类名。这可以用于遍历所有类名，因为classList类似于数组，但不是真正的数组，所以不能使用forEach方法。
案例:添加/去除背景图
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>添加/去除背景图</title> <style> #myBgDiv { width: 300px; height: 300px; background-color: #f0f0f0; background-size: cover; background-position: center; background-repeat: no-repeat; } .myButtonStyle { width: 100px; height: 30px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } .addBgStyle { background-image: url("./aImg.png"); } .removeBgStyle { background-image: none; } </style> </head> <body> <div id="myBgDiv"></div> <button id="myButton" class="myButtonStyle">添加背景图</button> <!-- 去除背景图 --> <button id="myRemoveButton" class="myButtonStyle">移除背景图</button> <script> // 获取元素 var myBgDiv = document.getElementById("myBgDiv"); var myButton = document.getElementById("myButton"); var myRemoveButton = document.getElementById("myRemoveButton"); // 绑定事件 myButton.onclick = function () { // 添加背景图 myBgDiv.classList.add("addBgStyle"); }; myRemoveButton.onclick = function () { // 移除背景图 myBgDiv.classList.remove("addBgStyle"); }; </script> </body> </html>
2.效果
7.操作img元素的属性
- 可以更改图像的源(src)、替代文本(alt)等属性。
案例:修改img标签图片的文本
解释:
HTML结构
- 有一个
<img>标签，它最初指向一个名为aImg.png的图片。 - 页面上还有三个按钮：
- 第一个按钮（
id="myOrignPic"）用于切换回原始的小女孩图片。 - 第二个按钮（
id="myNewPic"）用于切换到小男孩的图片。 - 第三个按钮（
id="mynewPic2"）用于切换到蓝鼠的图片。
- 第一个按钮（
CSS样式
- 按钮有一些基本的样式设置，比如宽度、高度、背景颜色、文字颜色、无边框等。这些样式使得按钮看起来更加美观和易于点击。
JavaScript功能
- 首先，通过
document.querySelector方法获取了页面中的<img>元素以及每个按钮元素。 - 然后为每个按钮绑定了点击事件处理函数：
- 当点击第一个按钮时，图片源更改为
./aImg.png，并且图片的alt和title属性都设置为“小女孩”。 - 当点击第二个按钮时，图片源更改为
./boy.png，并且图片的alt和title属性都设置为“小男孩”。 - 当点击第三个按钮时，图片源更改为
./aMouse.png，并且图片的alt和title属性都设置为“蓝鼠”。
- 当点击第一个按钮时，图片源更改为
整体效果
当你打开这个网页时，你会看到一张默认的小女孩图片。旁边有三个按钮，分别对应三种不同的图片。每当你点击其中一个按钮，中间显示的图片就会相应地变化，同时如果你将鼠标悬停在图片上，会显示出对应的提示文字，这对于辅助技术用户来说是非常有用的，因为它提供了关于图片内容的信息。
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改img标签图片的文本</title> <style> .myButtonStyle { width: 100px; height: 30px; background-color: #007bff; color: #fff; border: none; cursor: pointer; margin-top: 20px; } </style> </head> <body style="display: flex; align-items: center; justify-content: center;"> <img src="./aImg.png"> <div> <button id="myOrignPic" class="myButtonStyle">小女孩</button> <br /> <button id="myNewPic" class="myButtonStyle">小男孩</button> <br /> <button id="mynewPic2" class="myButtonStyle">蓝鼠</button> </div> <script> // 获取元素 var myImg = document.querySelector("img"); var myOrignPic = document.querySelector("#myOrignPic"); var myNewPic = document.querySelector("#myNewPic"); var mynewPic2 = document.querySelector("#mynewPic2"); // 绑定事件 myOrignPic.onclick = function () { myImg.src = "./aImg.png"; myImg.alt = "小女孩"; //img鼠标悬停文字显示设置 myImg.title = "小女孩"; } myNewPic.onclick = function () { myImg.src = "./boy.png"; myImg.alt = "小男孩"; myImg.title = "小男孩"; } mynewPic2.onclick = function () { myImg.src = "./aMouse.png"; myImg.alt = "蓝鼠"; myImg.title = "蓝鼠"; } </script> </script> </body> </html>
2.效果
8.操作Attribute属性
-
修改属性值(setAttribute)
- 用于设置指定元素上的属性值。
- 示例:
element.setAttribute('href', 'http://example.com');
-
获取属性值(getAttribute)
- 用于从指定元素上获取属性值。
- 示例:
var url = element.getAttribute('href');
-
移除属性(removeAttribute)
- 用于移除指定元素上的一个属性。
- 示例:
element.removeAttribute('href');
案例:修改我的链接地址
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改我的链接地址</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } h1 { color: #333; text-align: center; margin-bottom: 20px; } a { color: #007bff; text-decoration: none; font-size: 24px; transition: color 0.3s ease; } a:hover { color: #0056b3; } button { background-color: #007bff; color: white; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h1><a href="https://blog.csdn.net/2301_76862031" id="myAUrlStyle">惜.己的博客</a></h1> <button id="myButtonStyle">修改为CSND主页</button> </div> <script> // 获取元素 var myAUrlStyle = document.getElementById("myAUrlStyle"); var myButtonStyle = document.getElementById("myButtonStyle"); // 绑定事件 myButtonStyle.onclick = function () { // 修改链接地址 myAUrlStyle.setAttribute("target", "_blank"); myAUrlStyle.setAttribute("title", "跳转到CSDN博客"); myAUrlStyle.setAttribute("href", "https://blog.csdn.net"); myAUrlStyle.innerHTML = "CSDN博客"; }; </script> </body> </html>
解释
HTML结构
- 页面中心有一个包含标题
<h1>的容器（<div class="container">），标题内嵌套了一个超链接<a>。- 这个超链接初始指向一个具体的CSDN博客页面（
https://blog.csdn.net/2301_76862031）。 - 链接的文本是“惜.己的博客”。
- 这个超链接初始指向一个具体的CSDN博客页面（
- 页面上还有一个按钮，用于修改链接的属性。
CSS样式
- 页面使用了
Arial字体，并且背景颜色为浅灰色。 - 内容居中显示，并且垂直和水平都居中对齐。
- 标题
<h1>文字颜色为深灰色，居中对齐。 - 超链接
<a>默认为蓝色，没有下划线，并且鼠标悬停时会变为更深的蓝色。 - 按钮有蓝色背景、白色文字、圆角边框，并且鼠标悬停时背景色会变深。
JavaScript功能
- 首先，通过
document.getElementById方法获取了页面中的超链接和按钮元素。 - 为按钮绑定了点击事件处理函数：
- 当点击这个按钮时，会执行以下操作：
- 设置链接的目标窗口为新标签页（
target="_blank"）。 - 设置链接的
title属性为“跳转到CSDN博客”，这样当鼠标悬停在链接上时会显示提示信息。 - 修改链接的
href属性，使其指向CSDN的主页（https://blog.csdn.net）。 - 更改链接的文本内容为“CSDN博客”。
- 设置链接的目标窗口为新标签页（
- 当点击这个按钮时，会执行以下操作：
整体效果
当你打开这个网页时，你会看到一个居中的标题，标题内的链接指向一个特定的CSDN博客页面。下方有一个按钮，上面写着“修改为CSND主页”。
- 初始状态：链接文本是“惜.己的博客”，指向一个具体的博客页面。
- 点击按钮后：链接文本变为“CSDN博客”，并且指向CSDN的主页。此外，点击该链接会在新的标签页中打开。
2.效果
点击之后会跳转 惜.己的博客
修改之后
点击会跳转CSND首页
9.自定义属性data-*
- 允许你在任何HTML元素上存储额外的信息。
- 属性名必须以
data-开头，后面跟着描述性的名称。 - 可以使用
dataset属性来访问这些自定义数据属性。
案例:data属性的简单操作
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>data的简单操作</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; } div { background-color: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 20px; margin-bottom: 20px; width: 300px; text-align: center; } button { background-color: #007bff; color: white; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; margin: 10px; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } </style> </head> <body> <div id="myDiv">这是原始文本内容</div> <button id="myDivButton">自定义属性设置</button> <button id="getMyDivButton">自定义属性的获取</button> <script> // 获取元素 var myDiv = document.getElementById("myDiv"); var myDivButton = document.getElementById("myDivButton"); var getMyDivButton = document.getElementById("getMyDivButton"); // 绑定事件 myDivButton.onclick = function () { // 设置自定义属性 myDiv.setAttribute("data-my-attr", "Hello JavaScript!"); }; getMyDivButton.onclick = function () { // 获取自定义属性 var myAttrValue = myDiv.getAttribute("data-my-attr"); alert(myAttrValue); }; </script> </body> </html>
解释
HTML结构
- 页面包含一个
<div>元素，初始文本为“这是原始文本内容”。 - 有两个按钮：
- 第一个按钮（
id="myDivButton"）用于设置<div>的自定义属性。 - 第二个按钮（
id="getMyDivButton"）用于获取并显示该自定义属性的值。
- 第一个按钮（
CSS样式
- 页面的背景颜色是浅灰色，字体使用了无衬线字体
Arial。 <div>元素有白色的背景、边框和圆角，并且居中对齐。- 按钮有蓝色的背景、白色的文字、圆角和鼠标悬停时的颜色变化效果。
JavaScript功能
- 首先，通过
document.getElementById方法获取了页面中的<div>和两个按钮元素。 - 为第一个按钮绑定了点击事件处理函数：
- 当点击这个按钮时，会在
<div>上设置一个名为data-my-attr的自定义属性，并将其值设为 "Hello JavaScript!"。
- 当点击这个按钮时，会在
- 为第二个按钮绑定了点击事件处理函数：
- 当点击这个按钮时，会从
<div>中获取data-my-attr自定义属性的值，并通过alert弹窗显示出来。
- 当点击这个按钮时，会从
整体效果
当你打开这个网页时，你会看到一个带有文本“这是原始文本内容”的白色方块。下方有两个按钮：
-
自定义属性设置：当你点击这个按钮时，不会有任何视觉上的变化，但实际上会在
<div>上添加一个data-my-attr自定义属性，其值为 "Hello JavaScript!"。 -
自定义属性的获取：当你点击这个按钮时，会弹出一个警告框，显示之前设置的
data-my-attr自定义属性的值 "Hello JavaScript!"。
2.效果
点击获取自定义属性
点击设置自定义属性后再点击获取自定义属性
附录
素材下载
https://www.123684.com/s/lWZKVv-XRiav?提取码:kKpH
扫一扫
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
