Modify the style of a webpage through JavaScript

Need help with calling a JS event based on button presses and changing CSS font styling accordingly for each button? Check out the code snippet below:

    body {
         background-image: url("back2.jpg");
         background-size: 100% 100%;
     } 

     .buttonSize1{
        font-size: 3px;
     }
     
     .buttonsize2{
       font-size: 26px;
     }
     
     .buttonsize3{
       font-size: 45px;
     }

     /* Additional CSS styles */
     .fixed {
        position: fixed;
        top: 100px;
        left: 0px;
        width: 150px;
        border: #0E6B5B 3px solid;
        background-color: #FF9933;
    }

    p {
        padding-left: 100px;
    }

    td {
        padding-top: 10px;
        padding-bottom: 50px;
        text-align: center;
            font-family: "Lucida Console", Monaco, monospace;
        
    }

    .opac {
        opacity: 0.5;
        filter: alpha(opacity=10); /* For IE8 and earlier */
    } 
    
    .opac:hover {
        opacity: 1.0;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    } 
    .MainTable{
        border: #0E6B5B 3px solid;
        background-color: #FF9933;
        width: 50%;
        padding-top: 10px;
        padding-left: 100px;
        padding-right: 100px;

    }
    
    table.center {
        width:70%; 
        margin-left:15%; 
        margin-right:15%;
    }

Head over to the HTML section where JavaScript functions are defined to change font size:

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" href="7Global.css"/>
    <title> CSGO </title>

    <script>
    function textSizeS(){
    document.getElementById("Maintbl").style.font-size = "3px";
    }

    function textSizeM(){
    document.getElementById("Maintbl").style.font-size = "26px";
    }

    function textSizeL(){
    document.getElementById("Maintbl").style.font-size = "45px";
    }
    </script>

</head>
...
javascripthtmlcss

Answer №1

In this updated version, I have included a wrapper div to adjust the font size, fixed the syntax error from ...style.font-size to ...style.fontSize, and eliminated duplicate IDs (as each should be unique).

function textSizeS(){
  document.getElementById("MaintblWrapper").style.fontSize = "3px";
}

function textSizeM(){
  document.getElementById("MaintblWrapper").style.fontSize = "26px";
}

function textSizeL(){
  document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
     background-image: url("back2.jpg");
     background-size: 100% 100%;
 } 

 .buttonSize1{
    font-size: 3px;
 }
 
 .buttonsize2{
   font-size: 26px;
 }
 
 .buttonsize3{
   font-size: 45px;
 }
 
.fixed {
    position: fixed;
    Top: 100px;
    Left: 0px;
    width: 150px;
    border: #0E6B5B 3px solid;
    background-color: #FF9933;
}

p {
    padding-left: 100px;
}
td {
    padding-top: 10px;
    padding-bottom: 50px;
    text-align: center;
    font-family: "Lucida Console", Monaco, monospace;
    
}
.opac {
     opacity: 0.5;
     filter: alpha(opacity=10); /* For IE8 and earlier */
 } 
 
 .opac:hover {
     opacity: 1.0;
     filter: alpha(opacity=100); /* For IE8 and earlier */
 } 
 .MainTable{
     border: #0E6B5B 3px solid;
 background-color: #FF9933;
    width: 50%;
    padding-top: 10px;
    padding-left: 100px;
padding-right: 100px;

 }
 
 table.center {
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
  }
<table class = "fixed opac">
  <tr>
    <td><a href="Index.html">Home</a> </td>
    
  </tr>

  <tr>
    <td><a href="3Maps.html">Maps</a> </td>
    
  </tr>
  <tr>
    <td><a href="4CT.html">Counter <br/> Terrorists</a> </td>
    
  </tr>
  <tr>
    <td><a href="5T.html">Terrorists</a> </td>
  
  </tr>
  <tr>
    <td><a href="6About.html">About</a> </td>

   </tr> 
   <tr>
    <td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>

  </tr>
</table>

<br/>
<br/>
<br/>

<div id = "MaintblWrapper">
  
  <table class = "MainTable center">
    <td>  CS:GO’s Next Major </td>
    <tr>
      <td>
        Europe Region – Hosted by DreamHack

      </td>
    </tr>
  </table>

  <table class = "MainTable center">
    <td> Operation Wildfi </td>
    <tr>
      <td>

        What’s new? Visit the page below for details!
      </td>
    </tr>
  </table>  

  <table class = "MainTable center">
    <td>  We made some adjustments to rifles recently... </td>
    <tr>
      <td>
        nCS:GO. M
      </td>
    </tr>
  </table>  

</div>

Answer №2

textSize instead of font-size

Check out the demonstration at https://codepen.io/johndoe/pen/yLjRebq/

function changeTextSize(){
document.getElementById("content").style.textSize = "2px";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Monitoring the progress of file uploads within itemView

In the process of developing an application using Marionette/Backbone, I have successfully implemented file uploads over an AJAX call. Now, I am looking for a way to provide users with feedback on when they can select the uploaded file and proceed with mod ...

javascriptajaxbackbone.jsmarionette

Is there an improved guide available for using Netbeans' new language support plug-in?

Recently, I've started working with a new server side language that is based on Javascript. It has similar functionalities to PHP, but uses Javascript syntax for processing server responses and handling logic. In terms of text editors, Netbeans is my ...

javascriptpluginsnetbeansmoduleprogramming-languages

Encountering a 404 error when utilizing ngx-monaco-editor within an Angular application

I have been encountering an issue while attempting to utilize the editor within my Angular 8 application. Despite researching similar errors on Stack Overflow and GitHub discussions, I haven't found a solution yet. Here's how my angular.json asse ...

javascriptangulartypescriptmonaco-editor

Error: Express is undefined and does not have a property called 'use'

I'm encountering a problem with my express server specifically when I utilize the 'app.use' command. Within my task-routes.js file, the following code is present: import express from 'express'; const router = express.Router(); ...

javascriptnode.jsexpress

When you hover over the button, a picture will appear

This is an example code snippet from W3Schools. It showcases an animated button that reveals a small arrow next to the text when hovered over. The specific line of code responsible for this effect is .button span:after {content: '\00bb'. How ...

htmlcss

Express.js Passport.js throws an error when req.user is not defined

The middleware function below is unable to access req.user or determine if the user is logged in after they log in. I have confirmed that passport.serializeUser is successful after logging in and that req is defined when accessed from the middleware funct ...

javascriptnode.jsexpresspassport.js

Tips for automatically injecting Models and Services into all Controllers when developing a Node.js application using Express

After working with Sails and enjoying the automatic injection of models and services into controllers, I'm now looking to replicate this feature in my project using the Express framework. It will definitely save us from having to require them at the s ...

javascriptnode.jsexpresssails.js

Error occurred while trying to fetch the Backbone.js collection due to undefined value of 'this._byId'

I am currently working with coffeescript and my code is quite straightforward: class SomeCollection extends Backbone.Collection constructor: (@options) -> url: -> "#{$SCRIPT_ROOT}/some/data/#{@options.someId}" model: SomeModel class SomeV ...

javascriptbackbone.jscollectionscoffeescriptfetch

Unable to display images - PhoneGap

I am experiencing an issue where images that are being dynamically added to my HTML display correctly in Firefox, but on all the Android devices I have tested, the images do not appear. Instead, a box with their alt text is shown. HTML: <div class="ui ...

javascriptjqueryhtmlimagecordova

How come attempting to read a nonexistent document from Firestore results in an uncaught promise?

I've been struggling to read and display data from Firestore, but I keep seeing error messages in the console. Encountered (in promise) a TypeError: Unable to read properties of undefined (reading 'ex') Encountered (in promise) a TypeError ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

ng-select search functionality failing to display any matches

Currently, I am encountering an issue with the ng-select functionality in my Angular CLI version 11.2.8 project. Despite using ng-select version 7.3 and ensuring compatibility with the Angular CLI version, the search functionality within the select eleme ...

javascriptangularangularjstypescript

Is there a way I can ensure that two elements have identical heights?

Is there a way to ensure that two different elements in HTML are always the same height using CSS? I attempted to achieve this by setting each element to 50vh in the CSS, but it didn't work. codepen: https://codepen.io/ichfickedeinemutterdudummerwich ...

htmlcss

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

I've been attempting to set up a project using Angular CLI with ng-bootstrap, but I'm having trouble getting the style to work properly. Here are the exact steps I followed (as outlined in the get-started page): Create a new project using `ng n ...

javascriptcsstwitter-bootstrapangulartypescript

Issue with setting background image height to 100% or 100vh

Seeking help to address the issue of the URL field impacting the total height. Any assistance would be greatly appreciated. body,html { height:100% } Issue arises when there is a display in the address bar. .bg { min-height:100% background-size: cover; ...

javascriptcssvue.js

What is the best way to extract a color box from a Bootstrap container?

After trying multiple solutions found online, I'm still struggling to break out of the bootstrap container as needed. The setup involves a .fluid-container for a full-width background behind a regular .container. The challenge arises when the first co ...

csstwitter-bootstrapbootstrap-5

href not functioning properly on subsequent clicks, whereas onclick remains active

I'm experiencing an issue with a button that opens a modal. When clicking the button, it's supposed to open a new page in the modal and also make an API call for processing before loading the new page. <a class="btn btn-primary" type='b ...

javascriptjqueryhtmlcss

npm encountered a premature closure

I recently purchased and started using a ReactJS template which you can check out here My goal is to install all the dependencies by running npm install in the root directory of the template (React-App) However, I encountered an ERROR message like this: ...

javascriptnode.jsreactjsnpm

Is there a way to retrieve the modal's viewport height in Angular?

Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...

htmlcssangulartypescriptng-zorro-antd

Maximizing the efficiency of table search with AngularJS filter

Currently, I am implementing pagination in my tables using a library called Angular Table. This library utilizes the ng-repeat directive to create its own array from the data I provide. Due to this implementation, I am unable to utilize the search filter ...

javascriptangularjs

I am having trouble getting my console.log function to work properly on my HTML page

As a beginner in JavaScript, I am facing an issue with my console.log not working at all. When I type a console.log message, nothing shows up on my HTML page. I have tried to debug it, but being a newbie, I lack the necessary knowledge. All I can do is see ...

javascripthtml