change css using JS
Question
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
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%; }
<!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> <body> <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/> <table id = "Maintbl" class = "MainTable center"> <td> CS:GO's Next Major </td> <tr> <td> Europe Region – Hosted by DreamHack </td> </tr> </table> <table id = "Maintbl" class = "MainTable center"> <td> Operation Wildfi </td> <tr> <td> What's new? Visit the page below for details! </td> </tr> </table> <table id = "Maintbl" class = "MainTable center"> <td> We made some adjustments to rifles recently... </td> <tr> <td> nCS:GO. M </td> </tr> </table> </body> </html>
2 answers
solution1
0 2016-04-19 19:24:24
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
solution2
0 ACCPTED 2016-04-19 19:24:40
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change a buttons css using JS
Best way to change a CSS value using JS?
Change BackgroundImage from CSS using JS
How to dynamically change CSS using JS
dynamically change css class using js
Change position of an element using CSS/JS only
Animate text change using JS and CSS
Change JS on CSS change
Change Height (CSS/JS)
Change clip in CSS with JS
Related Tags