1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式，并加入背景图片。
4、为li添加id，创建函数fun ，并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"
6、加入改变文字大小的代码
element.style.color="black"
//修改文字大小
element.style.fontSize="18px"
7、然后就完成了。
思路就是：获取属性和属性值，拼接字符串，然后通过innerHtml将元素渲染到页面中。具体代码如下<!DOCTYPE html><html> <head> <title></title> <style> .block{display: flex margin-bottom: 10px }.block label{width: 60px text-align-last:justify text-align:justify text-justify:distribute-all-lines}#attr, #value{width: 220px line-height: 20px margin-left: 20px }#content div{width: 200px height: 200px color:#f00 text-align: center line-height: 200px background-color:rgb(109, 203, 240) }</style> </head> <body> <div class="block"> <label>属性</label>:<input type="text" id="attr" /> </div> <div class="block"> <label>属性值</label>:<input type="text" id="value" /> </div> <button onclick="setAttr()" style="margin-bottom: 20px">设置属性</button> <div id="content"></div> </body> <script> window.onload = function(){document.getElementById("content").innerHTML = `<div>Javascript有点意思</div>` }var style = "" function setAttr(){style += `${document.getElementById("attr").value}:${document.getElementById("value").value}` document.getElementById("content").innerHTML = `<div style="${style}">Javascript有点意思</div>` }</script></html>
