您现在的位置是:首页 > 唯美句子

【JavaScript】通过 getElementById 获取到的东西,到底都能干点啥

作者:纳雷武时间:2024-05-10 13:15:29分类:唯美句子

简介  文章浏览阅读3k次,点赞3次,收藏9次。id:你可以通过 element.id 来获取元素的 id 属性的值。tagName:通过 element.tagName 可以获取元素的标签名,例如元素的标签名是 “DIV”。innerHTML:使用 element.

点击全文阅读

当使用 getElementById 方法获取页面上的元素之后,可以获得许多有用的属性和值,帮助你实现各种任务。但作为一个小白,不知道 getElementById 到底都有啥,好苦恼。

所以我在这里简单总结了 50 个常见的可用属性,方便大家更好地利用 JavaScript 操作页面元素!

详细介绍版:精简版(快速查阅用法):

详细介绍版:

id:你可以通过 element.id 来获取元素的 id 属性的值。tagName:通过 element.tagName 可以获取元素的标签名,例如 元素的标签名是 “DIV”。 innerHTML:使用 element.innerHTML 可以获取元素内部的 HTML 内容,包括文本和嵌套元素。textContent:通过 element.textContent 可以获取元素内部的纯文本内容,不包括 HTML 标记。className:通过 element.className 可以获取元素的 CSS 类名,用于样式设置和选择器匹配。style:使用 element.style 可以访问和修改元素的 CSS 样式属性,例如 element.style.color 用于改变文本颜色。attributes:通过 element.attributes 可以获取元素的所有属性列表,你可以进一步遍历和访问这些属性。value (输入框):你可以使用 element.value 来获取或设置输入框元素的值,例如文本框或密码框中的文本。src (图像):对于图像元素,你可以通过 element.src 获取图像的 URL。href (链接):对于链接元素,使用 element.href 可以获取链接的目标 URL。alt (图像): 你可以通过 element.alt 获取图像元素的 alt 属性的值,这是图像的替代文本。width (图像): 使用 element.width 可以获取图像元素的宽度,通常以像素为单位。height (图像): 通过 element.height 可以获取图像元素的高度,通常以像素为单位。checked (复选框): 如果你有一个复选框元素,你可以使用 element.checked 来检查或设置它是否被选中(true 为选中,false 为未选中)。disabled (表单元素): 你可以使用 element.disabled 来检查或设置表单元素是否被禁用,例如文本框或按钮。selectedIndex (下拉框): 如果你有一个下拉框元素,你可以通过 element.selectedIndex 获取当前选中选项的索引。options (下拉框): 使用 element.options 可以获取下拉框元素的所有选项列表。value (下拉框选项): 你可以通过 element.options[index].value 获取特定索引位置的下拉框选项的值。innerHTML (下拉框选项): 使用 element.options[index].innerHTML 可以获取特定索引位置的下拉框选项的内部 HTML 内容。selected (单选框): 如果你有一个单选框元素,你可以使用 element.checked 来检查或设置它是否被选中(true 为选中,false 为未选中)。placeholder (输入框): 你可以通过 element.placeholder 获取输入框元素的占位符文本。title: 通过 element.title 可以获取元素的标题属性,通常用于提供鼠标悬停时的额外信息。max (输入框): 如果你有一个输入框元素,你可以使用 element.max 获取其最大值。min (输入框): 使用 element.min 可以获取输入框元素的最小值。step (输入框): 通过 element.step 可以获取输入框元素的步进值,通常用于数字输入。form (表单元素): 你可以通过 element.form 获取表单元素所属的表单对象。target (链接): 使用 element.target 可以获取链接元素的目标属性,通常用于指定链接在何处打开。name: 通过 element.name 可以获取元素的名称属性,通常用于表单元素。valueAsNumber (输入框): 如果你有一个输入框元素,你可以使用 element.valueAsNumber 获取输入框的值作为数字类型。valueAsDate (输入框): 通过 element.valueAsDate 可以获取输入框的值作为日期对象。charset (脚本): 你可以通过 element.charset 获取脚本元素的字符集(字符编码)。srcdoc (iframe): 使用 element.srcdoc 可以获取 iframe 元素的内联文档内容。cols (文本域): 如果你有一个文本域元素,你可以通过 element.cols 获取其列数。rows (文本域): 通过 element.rows 可以获取文本域元素的行数。defaultValue (输入框): 你可以使用 element.defaultValue 来获取输入框元素的默认值。autofocus (表单元素): 使用 element.autofocus 可以检查或设置表单元素是否自动获取焦点。hidden: 通过 element.hidden 可以检查或设置元素是否隐藏(true 为隐藏,false 为可见)。role (无障碍属性): 你可以通过 element.getAttribute(“role”) 来获取元素的无障碍角色属性的值。contentEditable (可编辑元素): 使用 element.contentEditable 可以检查或设置元素是否可编辑(“true” 为可编辑,“false” 为不可编辑)。scrollWidth: 通过 element.scrollWidth 可以获取元素的内容的滚动宽度,包括不可见部分。scrollHeight: 使用 element.scrollHeight 可以获取元素的内容的滚动高度,包括不可见部分。offsetWidth: 通过 element.offsetWidth 可以获取元素的宽度,包括内边距、边框和滚动条。offsetHeight: 使用 element.offsetHeight 可以获取元素的高度,包括内边距、边框和滚动条。clientWidth: 通过 element.clientWidth 可以获取元素的可见宽度,不包括滚动条。clientHeight: 使用 element.clientHeight 可以获取元素的可见高度,不包括滚动条。offsetLeft: 通过 element.offsetLeft 可以获取元素相对于其 offsetParent 元素的左偏移。offsetTop: 使用 element.offsetTop 可以获取元素相对于其 offsetParent 元素的上偏移。offsetParent: 你可以通过 element.offsetParent 获取元素的 offsetParent 元素。value (按钮): 如果你有一个按钮元素,你可以使用 element.value 来获取按钮的值。name (按钮): 通过 element.name 可以获取按钮元素的名称属性,通常用于表单中的按钮。

精简版(快速查阅用法):

id: element.idtagName: element.tagNameinnerHTML: element.innerHTMLtextContent: element.textContentclassName: element.classNamestyle: element.styleattributes: element.attributesvalue (输入框): element.valuesrc (图像): element.srchref (链接): element.hrefalt (图像): element.altwidth (图像): element.widthheight (图像): element.heightchecked (复选框): element.checkeddisabled (表单元素): element.disabledselectedIndex (下拉框): element.selectedIndexoptions (下拉框): element.optionsvalue (下拉框选项): element.options[index].valueinnerHTML (下拉框选项): element.options[index].innerHTMLselected (单选框): element.checkedplaceholder (输入框): element.placeholdertitle: element.titlemax (输入框): element.maxmin (输入框): element.minstep (输入框): element.stepform (表单元素): element.formtarget (链接): element.targetname: element.namevalueAsNumber (输入框): element.valueAsNumbervalueAsDate (输入框): element.valueAsDatecharset (脚本): element.charsetsrcdoc (iframe): element.srcdoccols (文本域): element.colsrows (文本域): element.rowsdefaultValue (输入框): element.defaultValueautofocus (表单元素): element.autofocushidden: element.hiddenrole (无障碍属性): element.getAttribute(“role”)contentEditable (可编辑元素): element.contentEditablescrollWidth: element.scrollWidthscrollHeight: element.scrollHeightoffsetWidth: element.offsetWidthoffsetHeight: element.offsetHeightclientWidth: element.clientWidthclientHeight: element.clientHeightoffsetLeft: element.offsetLeftoffsetTop: element.offsetTopoffsetParent: element.offsetParentvalue (按钮): element.valuename (按钮): element.name

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

我来说两句