js setAttribute的那些坑及正确设置属性值

最新推荐文章于 2025-06-02 14:00:00 发布

iteye_13003

最新推荐文章于 2025-06-02 14:00:00 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：乔乐共享众观千象每天进步一点点学习永无止境属性

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82606584

js 专栏收录该内容

123 篇文章

订阅专栏

本文探讨了JavaScript中元素属性设置的方法，包括如何正确设置class属性，区分标准属性与自定义属性的不同操作方式，并提供了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 坑①
var id = document.getElementById('moGId');
id.setAttribute('class');
// 多个浏览器呈现不兼容的现象

可以使用 id.class = 'red';

/*
1. standard attribute：标准属性（或固有属性），如id、name等DTD/Scheme中定义的标签属性。
 
　　　　特点：通过点方式或getAttribute均可访问、设置。
 
2. custom property：自定义属性，通过点方式访问、设置的非DTD/Scheme中定义的标签属性。
 
　　　　特点：仅仅能通过点方式操作属性。
*/

// 正确设置class的属性
document.getElementsByClassName('main-link-list')[0].setAttribute('class', '333333')

document.getElementById('test').class = 'red'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

iteye_13003

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS：通过getAttribute() / setAttribute()更改元素属性值实现点击更改按钮状态

Freya1010的博客

09-02

1836

1.前提：代码环境：laravel 需求：更改html某一组件状态（我这里是按钮）重点：两个方法 getAttribute() setAttribute() 2.实现：按照需求给组件添加自定义属性（可加可不加，根据具体情况，也可以用自身属性），我这里需要改变的是按钮状态，所以在当前button 增加一个自定义属性values。加载页面初始显示根据代码中的判断条件...

JS中setAttribute方法

fang_my的博客

02-18

1750

js中setAttribute（）的一个注意事项

参与评论您还未登录，请先登录后发表或查看评论

测试面试必备：Web自动化测试中修改页面元素属性的方法与实践

热门推荐

Z忽虎的博客

07-13

6万+

setAttribute基本用法element.setAttribute(attributename,attributevalue)setAttribute() 方法添加指定的属性，并为其赋指定的值,看到w3c的例子document.getElementsByTagName("INPUT")[0].setAttribute("type","button");我们经常需要在JavaScript中给E...

javascript中setAttribute()函数使用方法及兼容性

xiaohubeiplus的博客

11-29

4612

setAttribute()函数可以设置对象的属性，如果不存在此属性，则会创建此属性。语法结构: el.setAttribute(name,value) 参数列表: 参数描述 name 必需。规定要设置的属性名。 value 必需。规定要设置的属性值。代码实例: window.onload=function(){ var

JavaScript 更改属性的指定值 ----setAttribute()方法

yhlysy的博客

07-15

2万+

setAttribute()方法把指定属性设置或更改为指定值。它同样有两个值，setAttribute(name,value),第一个是属性名字，第二个是设置或更改的指定值。在上述例子中，将type为button（按钮）的input元素改为type为文本框（text），通过getElementById获取input对象，然后操作input对象的setAttribute()方法

js setattribute批量设置css样式

12-02

`setAttribute`是DOM API的一部分，它允许开发者为HTML或XML元素设置属性值。在`js setattribute批量设置css样式`这个场景中，我们使用`setAttribute`方法来一次性设置多个CSS属性。例如： ```javascript var dom =...

js设置和获取自定义属性的方法

11-26

例如，如果我们有一个变量`testAttr`，其值为"ddd"，我们可以这样选择具有相应属性值的元素： ```javascript var testAttr = "ddd"; $("#test[test='" + testAttr + "']"); ``` 这将选取所有具有`test`属性且值为...

XML文件修改节点属性值(多种方法)

10-27

第二种方法与第一种类似，但不同之处在于它是通过使用SetAttribute方法直接在XmlElement对象上修改属性值。 ```csharp XmlDocument doc = new XmlDocument(); doc.LoadXml(...

【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

07-30

972

一、修改元素属性 1、修改属性操作简介 2、直接访问属性 3、使用 setAttribute、getAttribute 和 removeAttribute 方法访问属性

js html无效果,JS不报错，但是功能无效果

weixin_29002935的博客

06-04

485

无标题文档#placeholder{width:400px;height:400px;}图片图片1图片2图片3图片4图片5这段文字将被切换下面是JS部分:// JavaScript Documentfunction showpic(whichpic){var placeholder=document.getElementById('placeholder'); //获取占位符的DOMvar so...

setAttribute()方法

计算机小白

04-24

5万+

setAttribute()方法增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值elementNode.setAttribute(name,value)说明：1.name：要设置的属性名2.value:要设置的属性值注意：1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。2.类似于getAttribute()方法，setAttribute()方法只...

setAttribute()方法总结

微赚淘客系统开发者博客

06-21

686

方法是在Java开发中常见的用于设置属性值的方法，它提供了一种方便灵活的方式来设置对象的属性。通过合理地使用方法，我们可以实现对象属性的动态设置，从而满足不同场景下的需求。希望本文能够帮助你更好地理解和应用方法，在实际开发中发挥其作用。

setAttribute()方法详解

技术研究中心

12-14

4796

方法是Java中实现数据传递和共享的关键工具，通过巧妙运用，可以更好地组织和管理数据，提高代码的可维护性。假设我们在Servlet中接收到一个用户的登录信息，需要在整个请求范围内传递这些信息。方法是一个非常重要且灵活的工具，用于在不同组件或作用域中传递和存储数据。可以将对象以及其他Java数据类型作为属性值传递，提高数据传递的灵活性。方法的使用方法、场景示例，助你更好地利用这一功能，提高编程效率。中使用，用于实现不同作用域的数据传递。在用户登录后，将用户信息存储在。在一次请求中，将数据存储在。

Javascript里面的setAttribute方法的错误用法。

NIUKUNLONG的博客

09-28

4149

今天在写代码的时候遇到一个问题，使用setAttribute方法怎么都没效果。跟群里伙伴探讨一下，发现问题所在。一般对概念理解不太深的或者不太常使用这个方法的同学都会犯下面这个错误。错误原因是没有理解setAttribute方法的用法。setAttribute方法只能用来设置标签属性和值。width属性属于标签属性style的子属性。所以不能直接给width赋值。

setAttribute 方法

qq_44943584的博客

04-20

1万+

setAttribute 方法

script设置html标签中属性的值

03-17

<think>好的，用户想知道如何用JavaScript设置HTML元素的属性值。我需要根据提供的引用内容来整理答案。首先，看看引用里提到的几种方法。引用1提到用JS给HTML元素追加属性，比如id或class。引用2和4提到了两种获取和设置属性的方法：一种是通过元素.属性名，另一种是使用setAttribute方法。引用5具体讲了设置img的src属性，两种方法都适用。用户的问题是如何设置属性值，所以应该分步骤说明不同的方法。首先介绍直接通过元素属性名设置，比如element.id = 'newId'。然后是用setAttribute方法，这个方法更通用，可以设置任何属性，包括自定义的。还要提到注意事项，比如设置class时要用className属性或者setAttribute('class', 'value')，因为class是保留字。接下来，可能需要给出示例代码，比如如何获取元素，然后用两种方法设置属性。比如用getElementById获取元素后，设置id或者用setAttribute设置其他属性。另外，引用4提到textContent和innerHTML的区别，虽然用户的问题是关于属性，但可能不需要深入这个，除非用户有后续问题。还要考虑兼容性和最佳实践，比如setAttribute适用于所有属性，而直接属性访问可能在某些情况下更方便。需要确保用户明白两种方法的区别和使用场景。最后，生成相关问题，帮助用户进一步学习，比如如何动态修改样式或处理自定义属性。检查是否有遗漏，比如引用3提到获取元素节点的方法，比如document.body，可能在示例中用不同的方式获取元素。但用户主要是设置属性，所以重点在设置方法上。确保回答结构清晰，分点说明，代码示例正确，引用标注正确。最后的问题要相关，比如优化方法或不同场景的应用。</think>通过JavaScript设置HTML元素属性值主要有两种常用方法，具体操作步骤如下： ### 一、直接通过元素属性名设置通过元素节点的内置属性直接赋值，适用于标准HTML属性（如id、title、href等） ```javascript // 获取元素 const element = document.getElementById('myElement'); // 设置标准属性 element.id = 'newId'; // 修改id element.title = '新标题'; // 修改title element.href = 'https://new.url'; // 修改链接地址 ``` 注意：对于`class`属性需使用`className`属性名（因为class是JavaScript保留字）[^2][^4] ### 二、使用setAttribute()方法通用方法，适用于所有标准属性和自定义属性 ```javascript element.setAttribute('data-custom', 'value'); // 设置自定义属性 element.setAttribute('class', 'new-class'); // 设置class element.setAttribute('disabled', true); // 设置布尔属性 ``` 此方法会覆盖原有属性值，支持任意属性名的字符串参数[^1][^5] ### 三、特殊属性设置示例 1. **图片src属性** ```javascript const img = document.querySelector('img'); // 方法1 img.src = 'new-image.jpg'; // 方法2 img.setAttribute('src', 'new-image.jpg'); ``` 2. **样式修改** ```javascript element.style.color = 'red'; // 直接修改样式属性 element.style.backgroundColor = '#f0f0f0'; ``` 3. **数据属性** ```javascript element.dataset.userId = '123'; // 设置data-user-id属性 ``` ### 四、注意事项 1. 布尔属性（如disabled、checked）设置时应使用true/false 2. 自定义属性建议使用`data-*`格式保证HTML有效性 3. 使用`getAttribute()`可获取属性值[^2][^3] 4. 直接属性访问与setAttribute()的区别：前者反映当前DOM状态，后者直接修改HTML属性 : 引用1 : 引用2 : 引用4 [^5]: 引用5