Change Paragraph Text

Javascript onclick button to change page font size or div font size

I’ll post the pages I’ve researched at the end. I need 3 buttons to change the font size of the div with paragraphs of text to 1.0em, 2.0em, and 3.0em when the buttons are clicked on. The initial body font size is 1.0em. I do have to use «em» on the font. I apologize if this isn’t the correct format to post this in. I tried to follow the site help and rules. This is the actual wording of the questions: (1) Add three buttons below the horizontal rule. Label the buttons “Normal”, “Medium” and “Large”. (2) Add an ‘click’ event handler to the “Normal” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 1em. (3) Add an ‘click’ event handler to the “Medium” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 1.5em. Figure 14 shows a portion of the resulting web page. (4) Add an ‘click’ event handler to the “Large” button so that when the button is clicked all of the text in the “message” div is changed to a font size of 2.0em. Here is the code I have:

---

I’ve created a test section of 3 buttons below the 3 actual buttons just to mess around with the javascript codes I found on stackoverflow.com. Any help or guidance would be greatly appreciated. Thank you. I’ve checked these pages with similar issues: change text-font size of whole page content How to change FontSize By JavaScript? click a button to change text font-size of in javascript/css Increase font size of whole web page on button click event using jquery Increase the font size with a click of a button using only JavaScript

Источник

Как увеличить шрифт по всему сайт по клику на кнопки?

спасибо, но нюанс в том, что нужно на всем сайте такое сделать. Есть вариант, где понадобиться меньше кода? или нет?

этот код привязан к кнопкам, а не к количеству контента, так что размер контента не повлияет на величину текущего кода

чтоб было понятнее, как это работает: вы нажимаете на кнопку, родительскому элементу в корне сайта добавляется класс, и в зависимости от этого класса применяется font-size всем дочерним элементам

Меняет шрифт только тексту, который лежит в теге

let level_1 = document.querySelector('.item.level-1'); let level_2 = document.querySelector('.item.level-2'); let level_3 = document.querySelector('.item.level-3'); let texts = document.querySelectorAll('p'); level_1.onclick = function() < for(let elem of texts)< elem.style.fontSize = "11px"; >> level_2.onclick = function () < for(let elem of texts)< elem.style.fontSize = "14px"; >> level_3.onclick = function () < for(let elem of texts)< elem.style.fontSize = "16px"; >>

.item.level-1 < font-size: 11px; >.item.level-2 < font-size: 14px; >.item.level-3 < font-size: 16px; >h3 < font-size: 20px; >p

 
A A A 
 
level 2
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.
 
level 3
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumq

Если нужно, чтобы весь текст на сайте менял свой шрифт.

let level_1 = document.querySelector('.item.level-1'); let level_2 = document.querySelector('.item.level-2'); let level_3 = document.querySelector('.item.level-3'); let texts = document.querySelector('.main'); let heading = document.querySelectorAll('h3'); level_1.onclick = function() < for(let elem of heading)< elem.style.fontSize = '11px'; >texts.style.fontSize = '11px'; > level_2.onclick = function() < for(let elem of heading)< elem.style.fontSize = '14px'; >texts.style.fontSize = '14px'; > level_3.onclick = function() < for(let elem of heading)< elem.style.fontSize = '16px'; >texts.style.fontSize = '16px'; >

body < font-size:16px; >.item.level-1 < font-size: 11px; >.item.level-2 < font-size: 14px; >.item.level-3 < font-size: 16px; >h3

 
 
A A A 
 
level 2
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.
 
level 3
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.
 

Источник

font,font size, and color change javascript

I am trying to make this code change the pre-written text font, font size, and color with an onclick button but am unable to make it work this is what i have so far and im stuck. anyone have any ideas?

     
I am going to change this text, I hope.
 
Style 
 var style = 'text'; function DoAll()  

teaching my self for class so various websites that apparently are telling me the wrong thing from you are suggesting lol

5 Answers 5

Try this, it’s a much simpler approach and won’t make anyone’s eyes bleed:

Click me to see some results 
Text that will change.
 function restyle() 

I’m still learning Javascript too, so if there are any experts out there I’d love to hear what they think! 🙂

    
This is the element which will change.
 Change Styles window.onload = function () < var changeStyles = query("#change-styles"); var target = query("#style-target"); changeStyles.onclick = function () < style(target, "fontSize", "18px"); style(target, "color", "blue"); style(target, "fontWeight", "bold"); >; >; function style (el, property, value) < el.style[property] = value; >function query (selector)  

I’ve taken the liberty of adding the rest of the «required» HTML bits and pieces, there (especially the DOCTYPE). You don’t need to know what it’s there for, right now, but it will solve a lot of problems in the future, if you always include it at the top of every HTML page you write, if you intend real people to use that page (basically, it makes Internet Explorer < IE10 suck less).

I’ve broken this down into bits that are a little more sensible, in terms of real-world JavaScript.

In most programming languages, you want to break your code down into smaller bits, to make it easier to read and work with.
JavaScript isn’t really much different.

I have broken apart apart the act of setting the style, into its own helper function

el.style.color = "purple"; // takes `el` and makes an el rule 

The catch here is that any CSS «style» that has a hyphen («font-size», «background-color») needs to use camelCase, when setting the value in JavaScript.

el.style.backgroundColor = "black"; 

I’ve created a helper function called style , which I then refer to inside of my window.onload code.

In this particular case, I’m not saving a lot, in terms of what I’m typing (in fact, I’m typing more), but what it would be saving me, in a more complex case, is the chance of missing something, in repeating myself, or in copy/pasting.

So by calling style(el, «fontWeight», «bold»); I don’t have to remember how to set the style for old-browsers, versus new browsers, versus styles that have been set using JS earlier on, versus those that haven’t (a topic for people concerned with professional websites that have to work on ancient browsers).

If you look inside of the definition for style that I wrote, you’ll see that I’m calling el.style[property] ; normally, when we know the name of the thing we’re looking for, on an object, we use a dot to separate them person.name; //»Bob» .
In circumstances where we might want to look for different properties, we use [] to separate them.

var property = «age»; person[property]; // 32

Next, I am using document.querySelector( selector ); to find the elements that I want, by passing it a CSS-style selector.

document.querySelector works on practically all browsers made in the past 6 years.

I’m grabbing the element I want to change the styles of, and I’m grabbing the element I’m listening to (waiting for a user to click).

Then I’m setting the onclick of the button to a function which will fire off a bunch of changes that I specify.
In this case, the onclick will change some styles.

You don’t typically want to use onclick or similar properties; normally, you want to use a process called event-registration or «listening», but that goes a little too far, for such a simple example.

For now, grab the elements, separate your «how you do it» implementation details from «when ‘X’ do ‘Y'» runtime details, and watch magic happen.

Funny enough, this isn’t much more code than the jQuery suggestion provided in another answer.

. but that’s a whole, gigantic library that you’d have to load (if you were even allowed), just to select a thing and change its styles.
Also, by using the «jQuery solution» to common problems, you frequently learn bad habits, or alternatively, don’t learn good habits which you would need to learn, had you not had the quick and easy solution in front of you.
jQuery, as used by most people, is particularly bad about reference-caching (or a lack thereof). If widely used jQuery patterns are employed on a production website, without thought put into them (especially if you’re not using jQuery, but some other library like it), you can murder your website’s performance.

Источник

click a button to change text font-size of in javascript/css

To get a clear picture of what i am doing check this example or check the following code

This example is to change text size of h1, h2, p. Is there a way in javascript/css that I can change text size of «body» that I can change the whole page text?

$(document).ready(function() < $("#small").click(function(event) < event.preventDefault(); $("h1").animate(< "font-size": "24px" >); $("h2").animate(< "font-size": "16px" >); $("p").animate(< "font-size": "12px", "line-height": "16px" >); >); $("#medium").click(function(event) < event.preventDefault(); $("h1").animate(< "font-size": "36px" >); $("h2").animate(< "font-size": "24px" >); $("p").animate(< "font-size": "16px", "line-height": "20px" >); >); $("#large").click(function(event) < event.preventDefault(); $("h1").animate(< "font-size": "48px" >); $("h2").animate(< "font-size": "30px" >); $("p").animate(< "font-size": "20px", "line-height": "20px" >); >); $("a").click(function() < $("a").removeClass("selected"); $(this).addClass("selected"); >); >);

* < margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; text-decoration: none; >body < background: #e7e7e7; >#wrapper < width: 400px; margin: 0 auto; padding: 40px; background: #fff; box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25); >#controls < float: right; padding: 2px; width: 25px; background: #333; position: fixed; margin: 0 0 0 440px; text-align: center; transition: .25s ease-out; >#controls a < font-size: 24px; color: #aaa; display: block; font-weight: bold; padding: 5px; >#controls a:hover < color: #fff; background: #000; transition: .25s ease-out; >a.selected < background-color: #294C52; color: #fff !important; >#small < font-size: 10px !important; >#medium < font-size: 16px !important; >#large < font-size: 20px !important; >.small < font-size: 75%; >h1 < font-size: 36px; font-weight: bold; >h2 < font-size: 24px; margin: 10px 0; >p

  
 
A A A 
 
Header
 
Subheader
 
Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.
 
 

Источник