JavaScript進行字體更換

有誰知道所需的JavaScript做一個簡單的字體轉換？我想有一個頁面，當您選擇的字體它改變另一個頁面上的所有文本區域的字體上的一個小的彈出窗口。我希望它可以更改頁面上的文本，但不一定。謝謝！JavaScript進行字體更換

2014-02-07 Jacob Gray

你在使用JQuery嗎？這將有很大的幫助，有幾個相對簡單的方法來做到這一點 – njfife

jQuery不是必要的。所有現代瀏覽器都可以做到這一點天真 – cgatian

使用類切換器和預定義的css類用於body標籤。例如：body.mono * {字體家庭：monopsace;} ... <按鈕的onclick ='（開瓶器||自）.document.body.className = 「單」; 「>等寬 – dandavis

的最簡單的方法是定義多個類，每個類具有的字體。

.arial { font-family: Arial; } 
.times { font-family: "Times New Roman"; }

然後，創建一個選擇或可以觸發事件的東西。我們將把類名中的選項的值參數：

<select id="font-changer"> 
    <option value="arial">Arial</option> 
    <option value="times">Times</option> 
</select>

然後，添加一個事件來改變類，你的目標預定義的類名稱的任何元素。在這種情況下，我們假設我們正在改變主體：

document.getElementById('font-changer').addEventListener('change', function() { 
    document.body.className = this.value; 
});

就是這樣。這是一個簡單的JSFiddle，它的目標是ID爲「target」的段落元素：http://jsfiddle.net/48dh9/

如果目標元素需要除字體外還有其他類，則需要確保刪除字體類（可通過循環通過選擇的所有選項並檢查目標元素是否具有這些類中的任何一個並刪除它們）然後添加類（因此className += " " + this.value而不是僅僅是className = this.value），但是您說簡單，所以...;）

來源

2014-02-07 22:35:51 samanime

該死的你打敗我吧。 – cgatian

我也會注意到，如果他們支持IE10 +，他們可以使用classList來添加一個新類，而不必擔心字符串連接問題，並且執行速度更快，因爲設置每個類都不會導致動畫幀發生。 https://developer.mozilla.org/en-US/docs/Web/API/Element.classList – cgatian

解決方案的靈感是如何... – dandavis

JavaScript進行字體更換

回答

相關問題