JS学习记录(补充四)

Posted 天上一片红

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS学习记录(补充四)相关的知识,希望对你有一定的参考价值。


 

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>

结果图:

 

以上是关于JS学习记录(补充四)的主要内容,如果未能解决你的问题,请参考以下文章

JS学习记录(事件补充一)

JS学习记录(补充二)

JS学习记录(补充一)

js常用代码片段

JS学习记录(jQuery补充一)

Java学习记录(补充一(以习题为主:判断,循环语句))