`

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

    博客分类:
  • js
阅读更多
// 坑①
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'

 

分享到:
评论

相关推荐

    js setattribute批量设置css样式

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

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

    在JavaScript中,setAttribute()是一个非常重要的函数,用于设置HTML元素的属性值。这个函数对于动态地改变页面上的元素特性来说是非常有用的。在使用这个函数时,需要特别注意的是它的兼容性问题,尤其是对于一些...

    js中设置元素class的三种方法小结

    但是,根据文章的描述,IE8/9/10、Firefox、Safari、Chrome和Opera这些浏览器不支持通过`setAttribute`方法来设置`className`属性。这意味着,在这些浏览器中,即使执行了上述代码,元素的class也不会被正确设置。 ...

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

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

    html,javascript元素属性文档

    例如,我们可以使用`document.getElementById`方法获取特定ID的元素,然后通过`.getAttribute`和`.setAttribute`来读取或修改元素的属性值。此外,JavaScript还可以监听和响应用户事件,如点击、滚动等,进一步增强...

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

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

    浅析js设置控件的readonly与enabled属性问题

    `readonly`属性用于设置一个控件为只读状态,意味着用户不能修改控件的值,但该控件仍然会向服务器发送数据。而`disabled`属性则用于禁用控件,使其完全无法交互,并且通常不会将数据发送到服务器。 从给定的文件...

    JavaScript中的DOM

    DOM方法包括getAttribute()和setAttribute(),前者获取属性值,后者设置属性值。 4.6 操作元素 - 创建元素:使用`document.createElement('element')`创建新元素。 - 创建文本节点:`document.createTextNode('...

    svg与js交互

    `setAttribute()`方法可以用来修改元素的属性值。 4. 处理SVG事件 SVG元素可以接收和处理各种事件,如鼠标点击(`onclick`)、鼠标悬停(`onmouseover`)、加载完成(`onload`)等。通过事件对象(例如`evt`),...

    通过js给html元素赋值

    此外,还可以使用`setAttribute`方法来设置或修改HTML元素的属性值: ```javascript var element = document.getElementById('elementId'); element.setAttribute('class', 'newClass'); // 设置元素的class...

    javascript动态添加事件.pdf

    - `setAttribute` 是一个通用的方法,用于设置HTML元素的属性值。在大部分现代浏览器中,你可以使用它来设置事件处理程序,如`onclick`。但需要注意的是,Internet Explorer(尤其是早期版本)不支持用此方法设置...

    JavaScript_DOM_编程艺术读书笔记

    - `setAttribute`用于设置或更改元素的属性值。 - 这两个方法只能通过具体的DOM元素调用,不能直接通过`document`对象调用。 以上内容涵盖了《JavaScript DOM 编程艺术》这本书的部分基础知识和技术要点,对于...

    JS动态修改iframe高度和宽度的方法

    3. 使用JavaScript的setAttribute方法来设置属性:除了直接访问属性,也可以使用setAttribute方法来设置iframe的高度和宽度属性。如document.getElementById("myframe").setAttribute("height", "300")。 4. 响应...

    html网页用户注册表单验证校验JavaScript源码代码

    //设置div标签的class属性为对提示,让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字,字母,下划线"; document...

    JS中attr和prop属性的区别以及优先选择示例介绍

    如果存在对应的钩子函数,`prop`会调用`set`方法来设置属性值,或调用`get`方法来获取属性值。如果不存在钩子,它会直接操作元素的JavaScript属性。 在某些情况下,`attr`和`prop`的优先选择取决于你实际需要操作的...

    JavaScript改变HTML元素的样式改变CSS及元素属性

    此方法接受两个参数:第一个参数是要修改的属性名(比如`class`、`id`),第二个参数是新的属性值。 3. 修改CSS样式和元素属性能够帮助我们实现动态的用户界面,提高用户体验。例如,可以基于用户的交互改变颜色、...

    网页用户注册表单校验JavaScript脚本代码源码下载

    //设置div标签的class属性为对提示,让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字,字母,下划线"; document...

    js实现对xml文件的解析

    - `getAttribute()` 和 `setAttribute()`:获取或设置元素的属性值。 - `childNodes` 和 `firstChild/lastChild`:遍历或获取子节点。 - `textContent`:获取或设置元素的文本内容。 3. **SAX解析器(Simple API...

Global site tag (gtag.js) - Google Analytics