Javascript操作元素属性

对于缺乏编程经验的人而言，可以说Javascript语言通过getElementById()等方法可以获取相关HTML元素，从编程的语言的角度阐述就是执行浏览器内置支持的getElementById()方法后返回一个对象，学习过不论Javascript还是C++的面向对象编程思想，都知道既然是对象，那么么它就具有属性和方法，或者说可以添加属性和方法。通过标签可以创建元素，你愿可以把HTML元素理解为编程语言中常常提到的对象。执行getElementById()方法不同的元素返回不同的对象，比如img元素具有src属性，而div就不具有，相同的元素也可能返回的对象有所不同，比如两个div元素背景颜色不同，执行getElementById()方法选择这两个元素，返回的结果就是两个背景颜色不同的div对象。在编写HTML代码的的时候给元素定义属性，在获取这些元素的时候返回的对象就具有你定义的属性值。

案例一（属性值是函数）

源码下载

《Javascript操作元素》中的代码是在HTML元素标签里面添加onclick鼠标事件属性，下面对其更改，使用Javascript语句添加。

15   <body>
16   <div class="div" id="div"></div>
17   <script>
18       let obj = document.getElementById("div");
19   //    写法一
20       function fun() {
21           obj.style.backgroundColor="blue";
22       }
23       obj.onclick = fun;//函数fun赋值给元素对象
24   //    写法二
25       obj.onclick = function fun() {
26           obj.style.backgroundColor="blue";
27       };
28   //    写法三
29       obj.onclick = function () {
30           obj.style.backgroundColor="blue";
31       };
32   </script>
33   </body>

代码解析

基本思路很简单，把原来文件中div中的onclick属性删除，然后在在js代码后面插入下面语句（注意把getElementById执行语句写在函数外面，函数外不能调用函数内局部变量）

    obj.onclick = fun;//函数fun赋值给元素对象的onclick属性

html元素的背景、边框等属性的属性值是一个用字符串表达的具体的值，onclick的属性值是一个函数，从编程语言的角度看，对象属性的值是函数，也就称之为方法。在Javascript语言中根据语法可以知道，给属性值是函数的属性赋值，可以先写好一个函数，然后把函数的名字赋值给属性，参见代码中“写法一”，注意函数名字后面，不要写小括号，如果写小括号，就意味着先执行fun函数，执行结果赋值给onclick属性，这样的话，你的鼠标还没有单击div元素，函数里面的代码就提前执行了。

“写法二”和“写法一”几乎没什么区别，只是形式上不同，“写法三”是匿名函数形式，你直接把一个函数赋值给一个对象的属性，写不写属性名字无所谓，属性名就相当于函数名。其实这些内容在编程语言中是非常基础的知识点，这里之所以强调，就是为了有编程基础的人站在语言的角度去思考浏览器DOM对象的相关知识，不要像学习HTML和CSS内容一样学习一个记忆一个，事实上为了更好地利用浏览器，你应该站在Javascript语言，进一步说是站在编程语言的角度去思考HTML和CSS，HTML标签经过浏览器解析执行后，在内存中就是一个个对象，通过HTML标签创建的元素对象和你在Javascript程序中通过new操作构造函数创建的对象一样可以自已通过Javascript语句增删属性，获取HTML创建的元素对象，只不过多了getElementById等获取对象的接口方法。

案例二(给class属性赋值)

源码下载

在一个已经写好的HTML和css的文件基础上添加Javascript代码，实现用户可以在网页上批量自定义元素的样式。

3    <head>
4        <meta charset="UTF-8">
5        <style>
6            /*通过类名定义的各种样式*/
7            .red{background-color: red;}
8            .greend{background-color: green;}
9            .blue{background-color: blue;}
10       </style>
11   </head>
12   <body>
13   <!--类属性是空值-->
14   <div class="" id="div">Javascript操作元素属性</div>
15   <script>
16       let obj = document.getElementById("div");
17   //    给div元素class属性赋值
18       obj.className="red";
19   </script>
20   </body>

代码解析

style标签里定义了多个样式，在实际工程中往往会定义很多样式制作成.css库文件，比如你们网站常用的颜色、字体，Javascript程序可以通过给一些元素添加class类属性值的方式控制元素样式。代码中第14行定义的div元素class属性值是空的，在Javascript程序中通过第18行代码obj.className="red";给div元素添加了类.red,这样div元素的背景颜色就是红色，当然你可以继续增加替他的属性。

HTML中元素的类属性关键字是class，为了降低学习成本，通过Javascript程序给元素添加class属性的时候也应该使用class，但是在第18行代码中你可以看到使用的关键字是className。这样的话，无形中你要多记忆一个词，这一点其实是有原因的，Javascript语言在ES5标准中class是一个保留字，在新发布的ES6标准中同时定义类的关键字，属性名不能与关键字、保留字重复这是非常基本的编程语言常识。

总结

Javascript可以给元素添加所有它具备的属性，上面列举了两个典型的案例，一个属性值是字符串，一个属性值是函数。

Javascript中类似className操作元素其它属性的写法，可以查询W3c《DOM Element 对象》，element指的是你通过getElementById()等DOM方法选择元素返回的对象，也就是说你可以把Element对象理解为HTML元素，比如className是Element对象或者说HTML元素具有的通用属性，对象访问属性的格式自然是 “对象名.属性名”(Element.className、Element.id、Element.style...)，你初学浏览器BOM、DOM、Element一堆概念可能比较混乱，这时候你应该结合具体代码案例，同时借助Javascript语言面向对象的概念去理解他们。选择元素需要用到getElementById()、getElementsByClassName()等方法，浏览器引入了一个document对象具有这些方法，因此调用这些方法的时候要在代码前面加上对象名document.getElementById()，大量的元素往往具有相同的属性和方法也给他们引入了一个抽象的对象名词element，实际上使用的时候不用写element这个归类关键词，直接填写具体的元素对象名字。document对象是浏览器具体的对象，不是对其它对象的统称，所以说调用getElementById()等方法必须前置document.。

元素、对象、属性、方法概念

在HTML中往往把通过p、img等标签创建的结果称为元素，执行getElementById方法选择元素返回的结果往往称为对象，对象都具有属性，当对象属性的属性值是函数的时候又称为方法，对象的属性如果还具有属性，说明这个属性相当于对象的子对象，大家在学习的时候，很多教程同一个东西可能被表述为对象，也可能被表述为元素，也可能表述为方法，也可能表述为属性，这时候你要看语境，以style为例，它是元素的属性，而当阐述字体大小、背景颜色等属性的时候，style就是对象，连起来书写，通过点符号访问对象属性的属性，比如obj.style.color，或者换个说法访问对象子对象的属性，你可以无限嵌套下去。

Javascript添加样式

第21行代码obj.style.backgroundColor="blue";的意思就是给div元素添加蓝色背景样式，style是obj对象的属性，backgroundColor是style子对象的属性，属性值是一个表示颜色的字符串"blue"。

style和class一样都是HTML元素对象的属性，不同的是style又是一个对象，因为它具有与视觉布局相关的很多属性，也就是平时说的CSS，正因为这样专门归类了《Style 对象》，平时使用的时候可以接查找W3C相关表格，刚开始学的时候没必要一次记住，参考你已有的CSS样式知识去学习，Javascript操作HTML元素的样式和CSS定义HTML元素样式使用样式属性名字基本一一对应，不过命名方式上有所区别，使用CSS样式属性的时候，比如背景颜色background-color、字体大小font-size、上边距margin-top，你可以看到他们是使用一个连字符-把两个单词连接在一起来表达一个新的意思，这个习惯来源于英语语言合成新词的词法习惯，英语相比汉语不太适合的眼睛检索分辨，为了区分两个单词合成的新词需要一个符号提醒眼睛。Javascript操作样式属性，采用大写字母代替连字符，比如背景颜色backgroundColor、字体大小fontSize、上边距marginTtop。大写字母的书写习惯来自编程语言变量命名规则，称为驼峰命名法。

Jquery.js框架

平时开发网站的时候，往往会使用.js框架，框架的作用就是为了代码复用，保持兼容性。很多非计算机出身的前端工程师，可能是先学习了JQuery，再去补习Javascript原生语言。对于有计算机编程语言的基础人而言，先学习 Javascript原生语言，然后再学习Javascript开发的各种框架，更节约时间，走的更远。Jquery简单地说就是它可以更方便地选择元素对象，添加样式，比如利用Javascript语言实现美元符号$代替元素选择方法冗长的书写document.getElementById。 Jquery操作的是已有的HTML元素，也就是说使用Jquery.js框架不会影响网站的SEO，因为目前搜索引擎针对的都是更语义化的HTML元素标签，而不是侧重视觉的CSS层叠样式表和侧重于逻辑的Javascript语言。