@bobnoordam

Access elements by ID and Classname

Posted on | By bobnoordam 
<html>
<head>
</head>

<body>
    <div id="target" style="border: 2px solid black; width: 100px; height: 100px;"></div>

    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
</body>

<script type="text/javascript">

    window.addEventListener("load", function () {
        doWorkOnId();
        doWorkOnClass();
    })

    function doWorkOnClass() {
        var targets = document.getElementsByClassName("stone");
        for (var i = 0; i < targets.length; i++) {
            var targetStone = targets[i];
            targetStone.style.width = "80px";
            targetStone.style.height = "20px";
            targetStone.style.border = "1px solid";
            targetStone.style.borderColor = "green";
            targetStone.innerHTML = "stone " + i;
            console.log(targetStone);
        }
    };

    function doWorkOnId() {
        var target = document.getElementById("target");
        target.style.borderColor = "red";
    };

</script>

</html>
Category: Web, CSS, Javascript