如何通過JavaScript更改字體大小

Question

如何使用JavaScript更改left-column的字體大小？

<div id="left-column">
    <a href="">1</a><br>
    <a href="">2</a><br>
    <a href="">3</a><br>
    <a href="">4</a><br>
    <a href="">5</a><br>
    <a href="">6</a><br>
</div>

這是我到目前為止的內容：

<script>
    document.write(document.body.clientWidth);
    if (document.body.clientWidth > 400)
         document.getElementById('left-column').style.letterSpacing="0px";              
    }
 </script>

Answer 1

您對style對象使用與CSS中相同的屬性名稱（減去連字符和帶有駝峰的大寫字母）。 現在， font-size是一個“繼承”屬性，這意味着當應用它時，該值也將應用於后代元素。 因此，雖然可以根據需要將其應用於每個<a>元素，但無需這樣做。 您可以將其應用於它們的父元素。 請記住，盡管在這種情況下所有后代元素都會受到影響，然后您必須在不希望受到影響的元素上重置字體。

 document.querySelector("button").addEventListener("click", function(){ var iw = window.innerWidth; document.getElementById("outputArea").textContent = "The usable width of the page is: " + iw + "px"; if(iw > 400){ // Get all the <a> elements that are children of the div var a = document.querySelectorAll("#leftcol > a"); // loop through the colleciton of them and change their font size for(var i = 0; i < a.length; i++){ a[i].style.fontSize = "3em"; } // We could avoid getting all the <a> elements and looping through them one by one // and just do this: // document.getElementById("leftcol").style.fontSize = "3em"; // And that would affect the the elements within the #leftcol element. } }); 

 <div id="outputArea"></div> <div id="leftcol"> <a href="">1</a><br> <a href="">2</a><br> <a href="">3</a><br> <a href="">4</a><br> <a href="">5</a><br> <a href="">6</a><br> </div> <button>Click Me</button> 

此外， document.write()不應該被使用，除非你是動態編寫整個文檔的DOM（通常到一個新窗口）。 而是將要輸出的內容注入到DOM中已經存在的元素中。

Answer 2

您應該將CSS與JavaScript相對使用，以根據頁面寬度控制字體大小。 最好的方法是使用媒體查詢。 有關更多詳細信息，請參見此頁面。 https://www.w3schools.com/css/css3_mediaqueries_ex.asp

例：

#leftcol{
    font-size: 20px;
}

@media screen and (max-width: 400px) {
    #leftcol {
        font-size: 12px;
    }
}

在上面的示例中，默認情況下，字體大小為20px。 當頁面小於或等於400像素時，頁面尺寸將縮小為12。