Question

我一直在研究需要根据屏幕宽度调整属性的问题。

我认为我可以使用媒体查询，但这些纯粹是对标签的建议，然后我决定使用我已经工作并放在onclick()中的JavaScript函数。

我知道我的函数在jsFiddle中工作但是在我的应用程序中看来，在AJAX重新加载页面之前发生了更改，因此属性的更改被设置回来因此我的更改无效页面加载。我找到了ajaxComplete 功能：

$( document ).ajaxComplete(function() {
  var actual_width=window.innerWidth;
  alert("width: " + actual_width);
  if(actual_width < 1281) {
    var h1=document.getElementById('sigsLink');
    alert("Font Size: " + h1.style.font-size);
    var newFontSize = "35px";
    h1.style.height = newFontSize;
  }
});

以下是 HTML ：

<span id="sigs" style="display: block;">
    <li >
        <a id="sigsLink" href="#" class="sigsLink" >Manage    Signatures</a>
    </li>
</span>

CSS ：

#sigsLink{
    font-size: 14px;
}

如果我正确使用AJAX，请告诉我，因为我的网页似乎没有调用它。这是我的JSFiddle似乎也没有工作：http://jsfiddle.net/Arandolph01/Lj5yr/3/我缺少什么？

修改

所以感谢IndieRok的建议，我觉得我越来越接近并尝试了：

$(document).ready(function() {
  var actual_width=window.innerWidth;
  //alert("width: " + actual_width);
  if(actual_width < 982) {
      var newFontSize = "35px";
      $('.sigsLink').css({
          fontSize:newFontSize
      });
  }
});

这给了我一个JavaScript错误“Uncaught TypeError：undefined不是函数”。我做错了什么？

谢谢。

Answer 1

我不知道你对你的jsfiddle做了什么，但是控制台显示了一堆错误......

我稍微更改了代码并使用了$（document）.ready event并使其正常工作

$(document).ready(function() {
      var actual_width=window.innerWidth;
      //alert("width: " + actual_width);
      if(actual_width < 982) {
          var newFontSize = "35px";
          $('.sigsLink').css({
              fontSize:newFontSize
          });
      }
});

[更新jsfiddle V2] http://jsfiddle.net/Lj5yr/7/）

页面加载后更改属性

1 个答案: