JS的DOM操做Demo

时间 2019-11-13

标签 dom demo 栏目 JavaScript 繁體版

原文原文链接

1.显示和隐藏标签javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

     //显示
     function show(){
     var p = document.getElementById('content');  //获取p元素
     p.style.display = 'block'; //设置style style内的是css代码
     }

     //隐藏
     function hide(){
     var p = document.getElementById('content');
     p.style.display = 'none';
     }

    </script>


</head>
<body>

<!--onclick内的是js代码-->
<button onclick="show();">显示</button>
<button onclick="hide();">隐藏</button>

<p id="content">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>

</body>
</html>

2.切换图片css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="images/icon_01.png">

<div>
    <button id="previous">上一张</button>
    <button id="next">下一张</button>
</div>

<script type="text/javascript">

 var minIndex = 1;
 var maxIndex = 9;

 // 图片索引
 var index = minIndex;

 //上一张按钮
 var previous = document.getElementById('previous');
 previous.onclick = function () {
        //操做索引
 if (index == minIndex) {
            index = maxIndex;
 } else {
            index--;
 }
        //根据索引显示对应的图片
 var img = document.getElementsByTagName('img')[0];
 img.src = 'images/icon_0' + index + '.png';
 };


 //下一张按钮
 var next = document.getElementById('next');
 previous.onclick = function () {
        //操做索引
 if (index == maxIndex){
            index = minIndex;
 }else {
            index++;
 }

        //根据索引显示对应的图片
 var img = document.getElementsByTagName('img')[0];
 img.src = 'images/icon_0' + index + '.png';
 };


</script>

</body>
</html>