zoukankan      html  css  js  c++  java
  • JavaScript中.、[]与setAttribute()在设置属性上的区别

    .和[]

    javaScript.和[]既可以对所有js对象设置属性,但是对于DOM对象它设置的属性有些特殊。对于元素DOM标准属性,实现属性值的设置/更改;对于元素DOM非标准属性,仅在js中有效,在(标准浏览器中)HTML中无效。

    setAttribute()

    设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。

    要获取某个属性当前的值,可使用 getAttribute();要删除某个属性,可使用 removeAttribute();要获取该自定义属性的属性值,可以使用getAttribute();

    语法:

    element.setAttribute(name,value)

    属性说明:

    name——表示属性名称的字符串。

    value——属性的值/新值。

    (.)、([])、(getAttribute())的区别

    <!DOCTYPE html>
    <html>
    
    <head>
        <title></title>
        <meta charset="UTF-8">
    </head>
    <style>
    </style>
    <script>
        window.onload = function () {
            var oImage=document.getElementById('image');
            var simg='weimob';
            console.log(oImage.alt);//=>'微盟百度品专大图'
            console.log(oImage['alt']);//=>'微盟百度品专大图'
            console.log(oImage.getAttribute('alt'));//=>'微盟百度品专大图'  
                 
        }
    </script>
    <body>
        <div id='div1'>
              <img id='image'   class='image' src='./images/1.jpg' alt='微盟百度品专大图'  width='500' height='auto'/>
        </div>
    </body>
    </html>

    在元素的DOM对象的class属性上需要注意,由于class是JavaScript中的保留字,采用(.)和([])获取/设置class属性值时,需要变为className,而采用getAttribute()/setAttribute()则需要直接写class的字符串。

    示例

    var oImage=document.getElementById('image');
    var simg='weimob';
    console.log(oImage.className);//=>'image'  
    console.log(oImage['className']);//=>'image'  
    console.log(oImage.getAttribute('class'));//=>'image'  
  • 相关阅读:
    spring入门-day01
    HTML概述
    day21-基础加强
    iptables
    25个iptables常用示例
    Linux安全调优1:CentOS防火墙的设置与优化
    sessionStorage 的数据会在同一网站的多个标签页之间共享吗?这取决于标签页如何打开
    JavaScript reduce() 方法
    classList属性和className的区别
    NPM 学习笔记整理
  • 原文地址:https://www.cnblogs.com/f6056/p/11320557.html
Copyright © 2011-2022 走看看