Question

64

font,font size, and color change javascript

rated 0 times [ 67] [ 3] / answers: 1 / hits: 16303 / 9 Years ago, tue, january 27, 2015, 12:00:00

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?

<html>

  <head> 

      <meta charset=utf-8 /> 

      <title>Change Paragraph Text</title> 

  </head>  

  <body> 

      <p id ='text'>I am going to change this text, I hope.</p>  

      <div>

        <button id=jschange onclick=DoAll>Style</button> 

      </div>

      <script type=text/javascript>

         var style = 'text';

         function DoAll() {

            One(document.write.style.big());

            Two(document.write.style.fontsize(7));

            Three(document.write.style.fontcolor(red));

         }

      </script>

  </body> 

</html>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alli

Add To Favorites

Follow

Total Points: 409

Total Questions: 101

Total Answers: 105

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

alli questions

1 How do I add types to a Vite library build?

Sat, Apr 23, 22, 00:00, 2 Years ago

1 Discord.js Bot giveaway command : embedSent.reactions.get is not a function

Fri, May 29, 20, 00:00, 4 Years ago

1 Applying multiple filters to a table reactjs

Mon, May 18, 20, 00:00, 4 Years ago

1 Framer-motion, delay rotateY while animating x

Tue, Mar 24, 20, 00:00, 4 Years ago

1 Questions about useCallback hook and anonymous function

Fri, Jan 24, 20, 00:00, 4 Years ago

View All

answered 10 Years ago eliasf · Accepted Answer

<!doctype html>



<html lang=en>

  <head>

    <meta charset=utf-8>

    <title></title>

  </head>

  <body>

    <p id=style-target>This is the element which will change.</p>

    <button id=change-styles>Change Styles</button>

    <script>



      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) {

        return document.querySelector(selector);

      }

    </script>

  </body>

</html>

Have a look;

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{color:purple} 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 [<property-name>] 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.