Question

我试图使用媒体查询来更改标签的属性，但我发现带有超链接的媒体纯粹是建议性的。所以，另一种方法是使用JavaScript，但我似乎无法使screen.width工作。

JavaScript的：

function adjustHeight(){
    var actual_width=screen.width;
    alert("width: " + actual_width);
    if(actual_width < 1281) {
        var h1= document.getElementById('procsLink').getAttribute('font-size');
        alert("font-size: " + h1);
        h1 = 35px;
        document.getElementById('procsLink').setAttribute('<font></font>-size',h1)
    }
return false;
}

以下是我的代码Jsfiddle：http://jsfiddle.net/Arandolph01/2DVv9/

注意：我知道有一种方法可以在点击＆＃39;之后仍然显示该链接。所以你可以看到更改的属性。（不确定如何）

我需要做些什么才能让JavaScript识别屏幕尺寸？我的标签是否正确？

谢谢。

Answer 1

这是问题，该锚标签上没有id，所以调整你的html如下： - 为锚标记添加了id - 删除了实际链接，以便您可以看到标签更改字体大小 - 删除onclick中的分号

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

比你这样的css：

#procsLink{
    font-size: 14px;
}

你的JS就像这样：

function adjustHeight(){

    var actual_width = window.innerWidth;

    if(actual_width < 1281) {
        var h1 = document.getElementById('procsLink');
        var newFontSize = '35px';
        h1.style.fontSize = newFontSize;
    }

}

Answer 2

function adjustHeight(){

    var actual_width  =screen.width;
    alert("width: " + actual_width);
    if(actual_width < 1281) {
        var h1 = document.getElementById('procsLink').getAttribute('font-size');
        alert("font-size: " + h1);
        h1 = "35px";
        document.getElementById('procsLink').setAttribute('font-size',h1)
    }
    return false;
}

将引用添加到35px;）

Answer 3

你错过了分号：

document.getElementById('procsLink').setAttribute('<font></font>-size',h1)

并将报价添加到35px。

您的代码现在工作正常，我更新了您的fiddle

function adjustHeight(){
   var actual_width = screen.width;
   alert("width: " + actual_width + "px");
   if(actual_width < 1281) {
      var h1 = document.getElementById('procsLink').getAttribute('font-size');
      alert("font-size: " + h1);
      h1 = "35px";
      document.getElementById('procsLink').setAttribute('<font></font>-size',h1);
   }
   return false;
}

根据屏幕宽度更改JavaScript中的标记属性

3 个答案: