DOM部分
getElement系列方法
<html lang="en"> <head> <meta charset="UTF-8"> <title>getElement系列方法</title> </head> <body> <p id="jereh">杰瑞集团</p> <p name="jredu">杰瑞教育</p> <p name="jredu">杰瑞教育</p> <button onclick="change()">变！！</button> <button onclick="change2()">变！！</button> <button onclick="change3()">全部字体变大！！</button> </body> <script> /*getElementById 通过ID查找元素，只会返回一个匹配的元素*/ function change() { document.getElementById("jereh").style.color = "red"; } /*getElementByClassName 通过class查找元素，返回一个匹配的元素数组 getElementByName 通过name属性查找元素，返回一个匹配的元素数组*/ function change2() { // var result = document.getElementsByClassName("jredu"); var result = document.getElementsByName("jredu"); for (var i = 0; i <= result.length; i++) { result[i].style.fontSize = "30px"; } } /*getElementByTagName 通过标签查找元素，只会返回一个匹配的元素数组*/ function change3() { var result = document.getElementsByTagName("p"); for (var i = 0; i <= result.length; i++) { result[i].style.fontSize = "50px"; } } </script> </html>
结果图：
Attribute
<html lang="en"> <head> <meta charset="UTF-8"> <title>Attribute</title> </head> <body> <img src="../../img/tu.png" alt="" id="img"><br> <button onclick="getUrl()">获取图片路径信息</button> <button onclick="changeUrl()">改变图片</button> </body> <script> var img = document.getElementById("img"); function getUrl() { /*var src = img.src;*//*绝对路径*/ var src = img.alt="图片不显示"; var src = img.getAttribute("src");/*相对路径*/ console.log("src"); } function changeUrl() { img.setAttribute("src","../../img/tu2.png"); // img.src="../../img/tu2.png"; } </script> </html>
结果图：
点符号
<head> <meta charset="UTF-8"> <style> .lzw { text-align: center; font-size: 30px; color: red; } .yut{ margin-top: 300px; } </style> <title>点符号</title> </head> <body> <p id="school">青岛理工大学！</p> <button onclick="change()">改变字体</button> </body> <script> var p = document.getElementById("school"); function change() { /*1:.style方法，逐个去给元素添加样式，速度慢！*/ /*p.style.textAlign = "center"; p.style.color = "red"; p.style.fontSize = "50px";*/ /*2:className方法，直接给元素添加一个样式类，速度快 * 前提是样式类已经存在 * 元素已存在默认类的时候，再次添加元素需要使用+=”（空格）类名称“*/ // p.className +=" yut"; /*3:cssText 可以一次吧多个样式写在样文本中*/ p.style.cssText = "color:red;font-size:40px;text-align:center"; } </script> </html>
结果图：
<html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <p id="jredu">杰瑞教育</p> </body> <script> var p = document.getElementById("jredu"); var value = p.innerHTML; p.onclick = function () { alert(value) } </script> </html>
结果图：
行内样式的获取
<html lang="en"> <head> <meta charset="UTF-8"> <style> #yut { color: red; } </style> <title>行内样式的获取</title> </head> <body> <p id="yut" style="font-size: 40px; ">青岛理工大学</p> </body> <script> var p = document.getElementById("yut"); // var style = p.style;/*.style 获取的全部为行内样式*/ /*浏览器种类的区分不适用浏览器对象， * 常使用的方法为判断浏览器特有的属性和方法*/ if (p.currentStyle) { var style = p.currentStyle; /*IE 获取元素的所有样式*/ } else { var style = window.getComputedStyle(p); /* W3C 获取元素的所有样式*/ } console.log(style.fontSize); console.log(style.color); </script> </html>
结果图：
