Question

＆＃13;

/* The code that actually changes the font size */

function fontSize(selectTag) {
    var listValue = selectTag.options[selectTag.selectedIndex].text;
    document.getElementById("text").style.fontSize = listValue;
}

/*my failed text to try and save the font size*/

function onClick(){
        var button = document.getElementById('button');
        button.addEventListener("click", save, false);
        display();
    }
        function saveFont(){
            localStorage.setItem();
        }
        
        window.addEventListener("load", onClick, false);

＆＃13;

  
  <!-- This is how they choose their font size -->
  <select onchange="fontSize(this);" size="11">
  <option>xx-small</option>
  <option>x-small</option>
  <option>small</option>
  <option>medium</option>
  <option>large</option>
  <option>x-large</option>
  <option>xx-large</option>
  <option>100%</option>
  <option>250%</option>
  <option>2cm</option>
  <option>100px</option>
</select>
        <br>
        <!-- this is how i would save it since they don't physically click a button -->
        <input type="button" id="save" value="Save Font Size">
        
        
        <!-- The body tag is has an 'id="text' "-->

＆＃13;

因此，更改字体大小不是问题，我已经解决了这个问题。但是对于我的生活，我无法将其保存到HTML本地存储，因此当我更改页面或刷新时，字体大小保持与我更改为的相同。任何帮助将不胜感激。

Answer 1

重要的是，当您尝试获取CSS属性值时，您将获得元素属性的最终计算值。某些属性未在元素的style属性上设置，而是通过CSS类或其他选择器设置。尝试使用element.style获取此类属性会在这些情况下产生空字符串。要确保获得最终值，请使用 window.getComputedStyle() 。

接下来，要将项目设置为localStorage，您可以使用 localStorage.setItem(key, value) 和 localStorage.getItem(key) API。您的代码是：

localStorage.setItem();

没有传递密钥名称或值，因此没有设置任何内容。以下是设置和获取localStorage值的方法：

将font-size设置为localStorage：

localStorage.setItem("font", window.getComputedStyle(DOMelementInQuestion).fontSize);

退出字体大小：

var storedFont = localStorage.getItem("font");

Answer 2

试试 CodePen Demo

注意：无法运行下面的代码段，因为StackOverflow上的代码段是沙盒的，无法访问localStorage。 CodePen Demo 是使用以下代码段中的代码的工作示例。

＆＃13;

function setFontSize() {
  var select = document.getElementById("text");
  var listValue = select.options[select.selectedIndex].value;
  select.style.fontSize = listValue;
  localStorage.setItem("font-size", listValue);
}

function getFontSize() {
  var select = document.getElementById("text");
  select.value = localStorage.getItem("font-size");
  select.style.fontSize = select.value;
}

window.onload = getFontSize();

＆＃13;

<select onchange="setFontSize();" size="11" id='text'>
  <option>xx-small</option>
  <option>x-small</option>
  <option>small</option>
  <option>medium</option>
  <option>large</option>
  <option>x-large</option>
  <option>xx-large</option>
  <option>100%</option>
  <option>250%</option>
  <option>2cm</option>
  <option>100px</option>
</select>

＆＃13;

Answer 3

斯科特对他的解释很感兴趣。我个人并不了解window.getComputedStyle，所以对我来说这是新的。

我重新编写了您的脚本以实现您的需求。它不是防弹，但它展示了如何做到这一点。

http://jsbin.com/cesususose/edit?html,js,output

如何在本地存储中保存字体大小？

3 个答案: