使用 JS 更改 css
[英]change css using JS
问题描述
我正在尝试调用一个 JS 事件，具体取决于按下的按钮，（有三个按钮）我想要一些 CSS 来更改字体大小（每个按钮不同），但是我所拥有的不起作用。 有人可以帮忙吗？
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 个解决方案
解决方案1
0 2016-04-19 19:24:24
fontSize不是font-size
演示https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
解决方案2
0 已采纳 2016-04-19 19:24:40
像这样，我添加了一个包装 div 来设置字体大小，将语法错误从...style.font-size更正为...style.fontSize并删除了重复的 id（因为它们应该是唯一的）。
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>
使用JS更改按钮CSS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.