您好,我正在尝试在点击按钮时在 html 中设置按钮属性,而在未点击按钮时,这些更改在页面未重新加载时工作正常。 我想在页面重新加载后保留按钮属性,o 如果单击按钮然后重新加载页面,则按钮需要保持选中状态。
我用 html 做了这个例子来展示我得到的东西
<button id="btntext" class="k-button" onclick="clickEvent(this.id, 't2')" onmousemove="imgChange(this.id, 't2', 't')" onmouseout="imgChange(this.id, 't','t2')"><img id= "icon" class="k-image" alt="text" src="../images/t2.png" style="width: 30px; height: 30px; vertical-align:inherit" hspace="7"/>Text</button>
还有一个脚本可以在单击或鼠标移动时更改 img (imgChange),但它无法正常工作。
最佳答案
有两种解决方案; 1.客户端解决方案 2.服务端解决方案
1.客户端解决方案
一个。使用 localStorage 或 sessionStorage,例如,
考虑您的 html;
<button id="somebutton" style="color:red" onclick=click()>Some Button</button>
现在是 JS:
function click(){
$("#somebutton").css("color","green");
localStorage.setItem("btncolor","green");
}
和文档加载
window.onload=function()
{
$("#somebutton").css("color",localStorage.getItem("btncolor"));
}
2.服务器端解决方案
在单击按钮时调用 ajax 以在服务器端保存按钮状态,并在 window.onload 上调用另一个 ajax 从服务器端获取状态。
关于javascript - 页面重新加载后保留按钮属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39511537/