通过document.getElementsByClassName获取类名
如果你想通过js脚本获取并控制html文档中的class类，修改类元素的css属性，那么可以使用document.getElementsByClassName()方法
document.getElementsByClassName()方法返回HTML文档中指定类名的所有元素集合，作为NodeList对象。NodeList 对象是一个有顺序的列表，可以通过数组的索引号来访问具体的html节点元素。
document.getElementsByClassName()方法返回HTML文档中指定类名的所有元素集合，作为NodeList对象。NodeList 对象是一个有顺序的列表，可以通过数组的索引号来访问具体的html节点元素。
- <body>
- <div class=”main_article”>
- </div>
- <div id=”show_button”>
- <span class=”show_button_area” onClick=”show_article()”></span>
- </div>
- </body>
- <script type=”text/javascript”>
- function show_article(){
- var control_area=document.getElementsByClassName(“main_article”)[0];
- control_area.style.height =’100px’;
- }
- </script>
复制代码
代码解析：
html文档中，span标签中通过onclick添加鼠标点击后的目标js方法。
onclick对应的方法中，通过document.getElementsByClassName(“main_article”)[0]，获取class为main_article的第一个元素。
control_area.style.height =’100px’; 通过该方法，修改获取到的html元素的height高度。
