javascript - 根据屏幕宽度更改 JavaScript 中的标签属性

Question

我试图使用媒体查询更改 a 标签的属性，但我发现带有超链接的媒体纯粹是建议性的。所以，另一种方法是使用 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/

注意:我知道有一种方法可以让链接在“点击”后仍然显示，这样您就可以看到更改后的属性。 (不确定如何)

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

谢谢。

Answer 1

这是问题所在，该 anchor 标记上没有 id，因此请像这样调整您的 html: - 添加 id 到 anchor 标签 - 删除了实际链接，以便您可以看到标签更改字体大小 - 删除了 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;
    }

}