JavaScript中对各种HTML元素属性的操作一览及代码案例

最新推荐文章于 2024-08-08 13:48:14 发布

A丶尘土

最新推荐文章于 2024-08-08 13:48:14 发布

阅读量2.2k

点赞数

分类专栏： js html 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_43326668/article/details/130863455

版权

js 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

引言：
JavaScript是一种广泛应用于Web开发的脚本语言，它提供了丰富的API和方法，用于对HTML元素的属性进行操作。本篇博客将一一列举JavaScript中对各种HTML元素属性的操作方法，并提供相应的代码案例，帮助读者更好地理解和应用JavaScript在Web开发中的作用。

一、基本属性操作：

innerHTML：获取或设置元素的HTML内容。

代码案例：

// 获取元素的HTML内容
var element = document.getElementById("myElement");
var htmlContent = element.innerHTML;

// 设置元素的HTML内容
element.innerHTML = "<h1>Hello, World!</h1>";

innerText：获取或设置元素的文本内容（不包括HTML标签）。

代码案例：

// 获取元素的文本内容
var element = document.getElementById("myElement");
var textContent = element.innerText;

// 设置元素的文本内容
element.innerText = "Hello, World!";

value：获取或设置表单元素的值，如input、textarea等。

代码案例：

// 获取表单元素的值
var inputElement = document.getElementById("myInput");
var value = inputElement.value;

// 设置表单元素的值
inputElement.value = "Default Value";

className：获取或设置元素的类名。

代码案例：

// 获取元素的类名
var element = document.getElementById("myElement");
var className = element.className;

// 设置元素的类名
element.className = "newClass";

id：获取或设置元素的唯一标识符。

代码案例：

// 获取元素的唯一标识符
var element = document.getElementById("myElement");
var id = element.id;

// 设置元素的唯一标识符
element.id = "newId";

二、样式属性操作：

style：获取或设置元素的样式属性，如元素的宽度、高度、颜色等。

代码案例：

// 获取元素的样式属性
var element = document.getElementById("myElement");
var width = element.style.width;
var color = element.style.color;

// 设置元素的样式属性
element.style.width = "200px";
element.style.color = "red";

getComputedStyle()：获取元素的计算后样式，包括通过CSS样式表和内联样式计算后的结果。

代码案例：

// 获取元素的计算后样式
var element = document.getElementById("myElement");
var computedStyle = window.getComputedStyle(element);
var color = computedStyle.color;

三、事件属性操作：

onclick：设置元素被点击时触发的事件。

代码案例：

// 设置元素点击事件
var element = document.getElementById("myElement");
element.onclick = function() {
  console.log("Element clicked!");
};

onmouseover：设置鼠标悬停在元素上方时触发的事件。

代码案例：

// 设置

鼠标悬停事件
var element = document.getElementById("myElement");
element.onmouseover = function() {
  console.log("Mouse over element!");
};

onmouseout：设置鼠标移出元素时触发的事件。

代码案例：

// 设置鼠标移出事件
var element = document.getElementById("myElement");
element.onmouseout = function() {
  console.log("Mouse out of element!");
};

onkeydown：设置按下键盘按键时触发的事件。

代码案例：

// 设置键盘按键按下事件
document.onkeydown = function(event) {
  console.log("Key pressed: " + event.key);
};

onsubmit：设置表单提交时触发的事件。

代码案例：

// 设置表单提交事件
var form = document.getElementById("myForm");
form.onsubmit = function() {
  console.log("Form submitted!");
};

四、属性操作方法：

getAttribute()：获取元素的指定属性的值。

代码案例：

// 获取元素的指定属性值
var element = document.getElementById("myElement");
var attributeValue = element.getAttribute("data-custom");

setAttribute()：设置元素的指定属性的值。

代码案例：

// 设置元素的指定属性值
var element = document.getElementById("myElement");
element.setAttribute("data-custom", "new value");

hasAttribute()：检查元素是否具有指定的属性。

代码案例：

// 检查元素是否具有指定属性
var element = document.getElementById("myElement");
var hasAttribute = element.hasAttribute("data-custom");

removeAttribute()：移除元素的指定属性。

代码案例：

// 移除元素的指定属性
var element = document.getElementById("myElement");
element.removeAttribute("data-custom");

五、表单元素属性操作：

disabled：设置表单元素是否禁用。

代码案例：

// 设置表单元素禁用
var inputElement = document.getElementById("myInput");
inputElement.disabled = true;

checked：设置复选框或单选框是否被选中。

代码案例：

// 设置复选框或单选框选中
var checkbox = document.getElementById("myCheckbox");
checkbox.checked = true;

selectedIndex：获取或设置下拉列表选中项的索引。

代码案例：

// 获取或设置下拉列表选中项的索引
var selectElement = document.getElementById("mySelect");
var selectedIndex = selectElement.selectedIndex;
selectElement.selectedIndex = 2;

options：获取下拉列表的所有选项。

代码案例：

// 获取下拉列表的所有选项
var selectElement = document.getElementById("mySelect");
var options = selectElement.options;

六、图片元素属性操作：

src：获取或设置图片元素的源地址。

代码案例：

// 获取或设置图片元素的源地址
var imageElement = document.getElementById("myImage");
var src = imageElement.src;
imageElement.src = "newimage.jpg";

alt：获取或设置图片元素的替代文本。

代码案例：

// 获取或

设置图片元素的替代文本
var imageElement = document.getElementById("myImage");
var altText = imageElement.alt;
imageElement.alt = "New alternative text";

七、链接元素属性操作：

href：获取或设置链接元素的目标地址。

代码案例：

// 获取或设置链接元素的目标地址
var linkElement = document.getElementById("myLink");
var href = linkElement.href;
linkElement.href = "http://www.example.com";

target：获取或设置链接元素的目标窗口。

代码案例：

// 获取或设置链接元素的目标窗口
var linkElement = document.getElementById("myLink");
var target = linkElement.target;
linkElement.target = "_blank";

结论：
JavaScript提供了丰富的属性操作方法，用于操作各种HTML元素。通过对这些属性进行读取和设置，我们可以实现动态的页面效果、用户交互以及表单验证等功能。本篇博客介绍了基本属性操作、样式属性操作、事件属性操作、属性操作方法以及针对表单元素、图片元素和链接元素的属性操作方法，并提供了相应的代码案例。深入了解和应用这些操作方法将帮助开发者更好地利用JavaScript开发出更丰富和交互性强的Web应用程序。

参考文献：