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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。