当前位置： 首页 > news >正文

javaScript操作元素(9个案例+代码+效果)

news 2025/4/22 19:13:12

目录

1.innerHTML

案例:使用innerHTML修改文本内容

1.代码

2.效果

2.innerText

案例:使用innerText修改文本

1.代码

2.效果

3.textContent

案例:使用textContent修改文本

1.代码

2.效果

4.通过style属性操作样式

案例:改变小球颜色

1.代码

2.效果

5.通过className属性操作样式

案例:改变形状

1.代码

解释

2.效果

6.通过classList属性操作样式

案例:添加/去除背景图

1.代码

2.效果

7.操作img元素的属性

案例:修改img标签图片的文本

解释:

HTML结构

CSS样式

JavaScript功能

整体效果

1.代码

2.效果

8.操作Attribute属性

修改属性值(setAttribute)

获取属性值(getAttribute)

移除属性(removeAttribute)

案例:修改我的链接地址

1.代码

解释

HTML结构

CSS样式

JavaScript功能

整体效果

2.效果

9.自定义属性data-*

案例:data属性的简单操作

1.代码

解释

HTML结构

CSS样式

JavaScript功能

整体效果

2.效果

附录

素材下载

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）。
    • 链接的文本是“惜.己的博客”。
  • 页面上还有一个按钮，用于修改链接的属性。
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 弹窗显示出来。
整体效果

当你打开这个网页时，你会看到一个带有文本“这是原始文本内容”的白色方块。下方有两个按钮：

  1. 自定义属性设置：当你点击这个按钮时，不会有任何视觉上的变化，但实际上会在 <div> 上添加一个 data-my-attr 自定义属性，其值为 "Hello JavaScript!"。

  2. 自定义属性的获取：当你点击这个按钮时，会弹出一个警告框，显示之前设置的 data-my-attr 自定义属性的值 "Hello JavaScript!"。

2.效果

点击获取自定义属性

点击设置自定义属性后再点击获取自定义属性

附录

素材下载

https://www.123684.com/s/lWZKVv-XRiav?提取码:kKpH


http://www.mrgr.cn/news/44568.html

相关文章：

  • Java实体对象转换利器MapStruct详解
  • Maven 入门详解
  • linux 重置root密码
  • 【英语】考研英语语法体系
  • 【大语言模型-论文精读】用于医疗领域摘要任务的大型语言模型评估综述
  • LSTM模型实现电力数据预测
  • 微信小程序开发问题记录
  • 复现文章：R语言复现文章画图
  • 数据仓库拉链表
  • 【PostgreSQL】PG数据库表“膨胀”粗浅学习
  • 【Spring】“请求“ 之后端传参重命名，传递数组、集合，@PathVariable，@RequestPart
  • localhost与127.0.0.1傻傻分不清楚，区别详解来了
  • HarmonyOS与Android在设计理念、系统架构、性能优化等方面全面对比
  • 插入数据库报错 ER_DUP_ENTRY
  • 中国喀斯特地貌分布shp格式数据
  • Acwing 数位统计DP
  • Linux的发展历史与环境
  • 【深度学习基础模型】图神经网络（Graph Neural Networks, GNNs）详细理解并附实现代码。
  • 股市突然暴涨，需要保持理性
  • 18732 最短路问题