简单的JS效果（前端）

最新推荐文章于 2024-09-09 09:35:48 发布

不断变强的小强

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量786

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53723681/article/details/127460013

版权

JavaScript CSS 按钮点击 li元素样式变换

关键词由CSDN通过智能技术生成

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

题外话：学习的最快方法是模仿与多查多想。

功能：点击按钮后，对 li的样式进行变换

效果图：

（点击前）

（点击后）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      function change() {
    var div1 = document.getElementById('div1')
    var div2 = document.getElementById('div2')
    var div3 = document.getElementById('div3')
    var div4 = document.getElementById('div4')
    var div5 = document.getElementById('div5')
  
    div1.style.backgroundColor = '#eed'
    div2.style.backgroundColor = '#3de'
    div3.style.backgroundColor = '#eed'
    div4.style.backgroundColor = '#3de'
    div5.style.backgroundColor = '#eed'
	}
 
    </script>
</head>
<body>
    <ul>
        <li>
            <div id="div1">li+1</div>
        </li>
        <li>
            <div id="div2">li+2</div>
        </li>
        <li>
            <div id="div3">li+3</div>
        </li>
        <li>
            <div id="div4">li+4</div>
        </li>
        <li>
            <div id="div5">li+5</div>
        </li>
    </ul>
 <input type="button" onclick="change()" value="点我切换颜色" />
 
</body>
</html>