JS学习记录（DOM部分）

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>

结果图：