第一个页面代码
<!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>用户设置自定义CSS样式</title></head><body><div style="margin: auto;width: 400px;"><input type="button" onclick="setBgColor()" value="设置首页背景色"><input type="button" onclick="setHeight()" value="设置高度"><br><br><a href="demo2.html">第二个页面</a></div></body></html><script>// localStorage 本地储存网页背景、字体颜色function setBgColor() {var color = window.prompt("请输入背景颜色");localStorage.setItem('bgcolor', color);}function setHeight() {height = window.prompt("请输入高度");localStorage.setItem('height', height);}</script>
第二个页面代码
<!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>第二个页面</title><style id="style"></style></head><body><div id="content" style="margin: auto;width: 400px;"></div></body></html><script>window.onload=function(){var bgcolor= localStorage.getItem('bgcolor');var height = localStorage.getItem('height');var style = document.getElementById('style');style.innerText=' #content {background-color:' + bgcolor + '; height:' + height + ';}';}</script>
从第一个页面点击进入第二个页面的效果
相关推荐
