change text-font size of whole page content

前端未结

关注

 5  1097

is there a way in javascript/css that i can change text size of all the labels, headings, paragraphs etc on a single click and without explicitly getting element\'s id and t

相关标签:

5条回答

逝去的感伤

2020-12-10 16:21

An alternative approach based on this answer

// 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'; 
    }
);

0 讨论(0)

傲寒

2020-12-10 16:24

You can use rem, which is better than em in some places because em cascades and rem does not.

With all lengths are specified in rem, you can adjust the sizes by change the font-size of the <html> element.

See also: http://snook.ca/archives/html_and_css/font-size-with-rem

0 讨论(0)
发布评论:

提交评论
- 加载中...

耶瑟儿～

2020-12-10 16:25

Worked for me:

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]);

0 讨论(0)

耶瑟儿～

2020-12-10 16:36

Add an id to the body tag and then go ahead and change it's font size with JavaScript. This will change the font size for every element inside your webpage! It is as simple as that!

0 讨论(0)
发布评论:

提交评论
- 加载中...
情书的邮戳

2020-12-10 16:41
I'd recommend using ems as a measure for setting font sizes. That way, with 1 tag, you can adjust the font sizes of every element relatively, instead of specifying specific sizes. Example:
```
body {
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
}

p.large {
  font-size: 1.2em;
}
```
Then you could apply a class to the body, like so
```
body.enlarged {
  font-size: 1.3em;
}
```
Which would scale the font size of all elements respectively. The javascript code would go something like this:
```
document.body.classList.add('enlarged');
```
Demo here: http://jsfiddle.net/bW9fM/1/
0 讨论(0)
发布评论:

提交评论
- 加载中...