10

在 javascript/css 中是否有一种方法可以通过单击更改所有标签、标题、段落等的文本大小，而无需显式获取元素的 id，然后更改其字体大小。

我现在正在做的是通过 javascript 获取元素的 id 并明确更改其字体大小。要清楚地了解我在做什么，请查看此链接或查看以下代码

<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>
4

5 回答 5

5

您可以使用rem，这比em在某些地方更好，因为em级联而rem不是级联。

在 中指定所有长度后，您可以通过更改元素rem的字体大小来调整大小。<html>

另见：http ://snook.ca/archives/html_and_css/font-size-with-rem

于 2013-05-09T12:00:35.697 回答
5

您可以递归地更改元素及其子元素的字体以“强制”它全部更改：

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

或者，您可以使用style元素的属性作为对象：

function changeFont(element){
    element.style.fontFamily="Courier New";
    for(var i=0; i < element.children.length; i++){
        changeFont(element.children[i]);
    }
}
changeFont(document.getElementsByTagName("body")[0]);
于 2017-11-16T01:20:26.850 回答
1

向body标签添加一个 id，然后继续使用 JavaScript 更改它的字体大小。这将更改网页中每个元素的字体大小！它是如此简单！

于 2013-05-09T11:45:36.253 回答
1

我建议使用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-09T11:52:02.280 回答
0

基于此答案的替代方法

// iterate over the children of an element, and the element itself
// and excute a callback function, passing in the elements
function mapElement(element, callback){
    callback(element);    
    for(var i=0; i < element.children.length; i++){
        callback(element.children[i]);
    }
}

mapElement(
    document.querySelector('body'), 
    (e) => { 
        e.style.fontFamily = 'Arial';
        e.style.fontSize = '12pt'; 
    }
);
于 2020-05-06T15:53:18.477 回答