Change An A Tag Attribute In Javascript Based On Screen Width

I was trying to change the attribute of an a tag using media queries but I found out that media with a hyperlink is purely advisory. So, the alternative is to use JavaScript but I

Solution 1:

Here is the problem, there is no id on that anchor tag so adjust your html like this: - added id to the anchor tag - removed the actual link so you can see the a tag change font size - removed the semicolon in the onclick

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

Than your css like this:

#procsLink{
    font-size: 14px;
}

And your JS like this:

functionadjustHeight(){

    var actual_width = window.innerWidth;

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

}

Solution 2:

functionadjustHeight(){

    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)
    }
    returnfalse;
}

Add quote to 35px ;)

Solution 3:

You missed the semicolon after:

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

And add quote to 35px.

Well your code is working fine now, I updated your fiddle

functionadjustHeight(){
   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);
   }
   returnfalse;
}