更改整個頁面內容的文本字體大小

有沒有在JavaScript/CSS中的一種方法，我可以更改所有標籤，標題，段落等的文本大小在一次點擊，並沒有明確獲取元素的ID，然後更改其字體尺寸。更改整個頁面內容的文本字體大小

我現在正在做的是，我通過javascript獲取元素的id並明確更改其字體大小。要獲得我在做什麼檢查該link清晰的畫面或查看下面的代碼

<script type="text/javascript"> 
function changemysize(myvalue) { 
    var div = document.getElementById("mymain"); 
    div.style.fontSize = myvalue + "px"; 
} 
</script>

HTML代碼

Choose a text size: 
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font> 
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font> 
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font> 
<div id="mymain"> 
Only this text gets affected 
</div>

來源

2013-05-09 awais

的ID添加到body標籤，然後繼續前進，改變它的字體大小與JavaScript。這將改變網頁中每個元素的字體大小！它是如此簡單！

來源

2013-05-09 11:45:36 akash4eva

或只是簡單的樣式身體 – 2013-05-09 11:49:08

無需ID身體，只要使用'document.body'。 – 2013-05-09 11:50:18

我建議使用ems作爲衡量設置字體大小。這樣，使用1個標籤，您可以調整每個元素相對於的字體大小，而不是指定特定的大小。例如：

body { 
    font-size: 1em; 
} 

h1 { 
    font-size: 1.5em; 
} 

h2 { 
    font-size: 1.3em; 
} 

p.large { 
    font-size: 1.2em; 
}

然後，你可以應用類的身體，像這樣

body.enlarged { 
    font-size: 1.3em; 
}

這將分別所有元素規模的字體大小。 JavaScript代碼會去是這樣的：

document.body.classList.add('enlarged');

演示在這裏：http://jsfiddle.net/bW9fM/1/

來源

2013-05-09 11:52:02

爲什麼要將常規js與jquery混合？ – 2013-05-09 11:57:40

@BramVanroy jQuery用於演示綁定處理程序;這不是問題的一部分（他綁定了自己的處理程序，albiet以糟糕的方式）問題沒有用jQuery標記，因此我沒有使用jQuery的'.addClass（）'。使用庫並不意味着你不能使用原始JS。如果它讓你的生活變得更好，這裏有一個[純js版本]（http://jsfiddle.net/bW9fM/1/）和[jQuery版本]（http://jsfiddle.net/bW9fM/2/）。 – 2013-05-09 12:01:51

您可以使用rem，這是優於em在一些地方，因爲em瀑布和rem沒有。

所有長度都在rem中指定，您可以通過更改<html>元素的字體大小來調整大小。

參見：http://snook.ca/archives/html_and_css/font-size-with-rem

來源

2013-05-09 12:00:35 Tezcat

非常方便的提示！可惜它需要IE9 plus，因爲'ems'既可以是祝福也可以是詛咒。如果我不關心較老的IE，我可能會從現在開始使用'rem'。 – 2013-05-09 12:06:44

爲我工作：

function changeFont(element){ 
    element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New"); 
    for(var i=0; i&lt;element.children.length; i++){ 
     changeFont(element.children[i]); 
    } 
} 
changeFont(document.getElementsByTagName("body")[0]);

來源

2017-11-16 01:20:26

更改整個頁面內容的文本字體大小

回答

相關問題