我正在嘗試將用 CSS 制作的圓圈從一個 HTML 頁面傳遞到另一個頁面。首先圓圈是綠色的。單擊按鈕后，圓圈變為紅色。我希望其他 html 頁面的相同綠色圓圈像第一頁一樣變成紅色。這是第一個 HTML 頁面的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
<script>
function passvalues(){
const first=document.getElementById("first");
localStorage.setItem("firstvalues",first);
return false;
}
</script>
</head>
<body>
<div id="first"></div>
<input type="button" value="click here" onclick="doSomeThing()">
<script>
function doSomeThing(){
document.getElementById("first").style.backgroundColor='red';
}
</script>
<form action="second-page.html">
<input type="submit" value="Click" onclick="passvalues()"/>
</form>
</body>
這是第二個 HTML 頁面（Second-page.html）的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<style>
#first{
height:20px;width:20px;
border-radius:50%;
border-width: 5px;
background-color: green;
}
</style>
</head>
<body>
<div id="first"></div>
<span id="first"></span>
<script>
document.getElementById("first").innerHTML=localStorage.getItem("firstvalues");
</script>
</body>
</html>
當我運行此代碼時，我會在第二頁上看到一個綠色圓圈和其中的 [object HTMLDivElement]。我認為函式 innerHTML 有問題。
uj5u.com熱心網友回復：
您可以避免在 index.css 中使用包含一個類的 JavaScript，該類使用:active在單擊時更改圓圈的顏色。這是一個簡單的示例，您可以根據需要進行安排：
<html>
<body>
<button class="btn">Click me</button>
<style>
.btn{
background:black;
color:white;
border:0;
margin:1rem;
}
.btn:active{
background:red;
}
</style>
</body>
</html>
一個好主意是在使用 JavaScript 單擊按鈕后激活樣式，這樣您就不必將函式傳遞給其他頁面，而是可以通過放置在第二頁上的另一個按鈕來激活此類。
在此示例中，我更改了按鈕的背景，而不是更改按鈕的樣式，您可以將類直接應用于圓圈。
我希望這個答案對你有用，如果沒有，請告訴我，我會給你更多幫助！
盡力而為。
uj5u.com熱心網友回復：
您要在此處存盤的是 div 作為物件。
而是嘗試存盤該 div 的 Html 本身。利用：
localStorage.setItem("firstvalues", first.outerHTML)
注意：ID 對頁面應該是唯一的。當您將第一頁的#first 的內容放在第二頁的#first 中時，您創建了兩個具有相同id 的元素。兩者都有不同的ID以避免沖突。
uj5u.com熱心網友回復：
您正在將表單提交到另一個頁面。那么為什么不使用在 GET 引數中傳遞資料的標準方法呢？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514524.html
上一篇：粘性導航鏈接問題